如何避免子元素从body元素的样式中获取文本修饰风格 [英] How to avoid child elements to get text-decoration style from body element's style

问题描述

HTML例子：
$ b

 < span> line1< / span> 
< div id =div1class =no-underline> 
< div id =div2class =no-underline> subline1< / div> 
< div> subline2< / div> 
< / div> 
  

body {
font-family：Arial;
字体大小：8px;
color：rgb（255，0，85）;
font-weight：bold;
font-style：italic;
text-decoration：underline;
}
＃div1 {
color：black！important;
}
＃div2 {
color：green;
}
.no-underline {
text-decoration：none！important;
}


结果是：

• line1：红色和下划线


• subline1：绿色和下划线


• subline2：黑色和下划线
>

此处演示

我希望subline1和subline2不加下划线。但身体的风格应该留在我的情况。

这可能如何？

解决方案

您可以使用

 text-decoration  prettyprint-override>  display：inline-block; 
  

因为在你的情况下你的元素是块，你可能还想要

  width：100％; 
  

使它们更像块状。

演示

HTML example:

<span>line1</span>
<div id="div1" class="no-underline">
    <div id="div2" class="no-underline">subline1</div>
    <div>subline2</div>
</div>

body {
    font-family: Arial;
    font-size: 8px;
    color: rgb(255, 0, 85);
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
}
#div1 {
    color: black !important;
}
#div2 {
    color: green;
}
.no-underline {
    text-decoration:none !important;
}

The result is :

• line1: red and underlined
• subline1: green and underlined
• subline2: black and underlined

Demo here

I want subline1 and subline2 not underlined. But body's style should stay at my case.

How is this possible?

解决方案

You can get rid of text-decoration set on an ancestor using

display: inline-block;

Since in your case your elements are blocks, you may also want

width: 100%;

to make them more block-like.

Demo

这篇关于如何避免子元素从body元素的样式中获取文本修饰风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！