Question

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;
}

结果是：

line1：红色并带下划线
subline1：绿色并带下划线
subline2：黑色和带下划线

Demo here

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

这怎么可能？

Answer 1

首先，我建议避免使用内联Css和！重要的是，这是一种不好的做法，并且会使您的代码很难在以后修改。一个解决方案是将文本修饰放在跨度上：

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

Answer 2

您可以使用

删除祖先上设置的text-decoration

display: inline-block;

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

width: 100%;

使它们更像块状。

Demo

Answer 3

你走了！ 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>

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

3 个答案: