如何避免子元素从正文元素的样式中获取文本装饰样式

Question

HTML example: HTML示例：

<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 第1行：红色并带有下划线
subline1: green and underlined subline1：绿色和带下划线的
subline2: black and underlined subline2：黑色和带下划线的

Demo here 在这里演示

I want subline1 and subline2 not underlined. 我希望subline1和subline2不带下划线。 But body's style should stay at my case. 但是身体的风格应该由我来决定。

How is this possible? 这怎么可能？

Answer 1

First I would recommend to avoid using inline Css and !important, that's a bad practice and will make your code very hard to modify later. 首先，我建议避免使用内联Css和！important，这是一种不好的做法，并且会使以后的代码很难修改。 one solution would be to put your text decoration on the span: 一种解决方案是将文本修饰放在跨度上：

<span style ="text-decoration: underline;">
line1
</span>

Answer 2

You can get rid of text-decoration set on an ancestor using 您可以使用以下方法消除祖先上设置的text-decoration

display: inline-block;

Since in your case your elements are blocks, you may also want 由于在您的情况下，您的元素是块，因此您可能还需要

width: 100%;

to make them more block-like. 使它们更像块状。

Demo 演示版

Answer 3

Here you go! 干得好！ http://jsfiddle.net/41ragvd2/ http://jsfiddle.net/41ragvd2/

<body style="font-family: Arial; font-size: 8px; color: rgb(255, 0, 85); font-weight: bold; font-style: italic;" >
<span style="text-decoration: underline;">
line1
</span>

<div style="color:black; !important;">
<div style="color:green; !important;">
subline1
</div>

<div>
subline2
</div
</div>
</body>

如何避免子元素从正文元素的样式中获取文本装饰样式

问题描述

3 个解决方案

解决方案1
2 2014-09-09 23:10:24

解决方案2
1 已采纳 2014-09-09 23:12:10

解决方案3
0 2014-09-09 23:13:03

如何避免子元素从正文元素的样式中获取文本装饰样式

问题描述

3 个解决方案

解决方案1 2 2014-09-09 23:10:24

解决方案2 1 已采纳 2014-09-09 23:12:10

解决方案3 0 2014-09-09 23:13:03

解决方案1
2 2014-09-09 23:10:24

解决方案2
1 已采纳 2014-09-09 23:12:10

解决方案3
0 2014-09-09 23:13:03