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

【问题标题】：How to avoid child elements to get text-decoration style from body element's style如何避免子元素从正文元素的样式中获取文本装饰样式
【发布时间】：2014-09-10 07:18:24
【问题描述】：

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

结果是：

第 1 行：红色和下划线
subline1：绿色和下划线
subline2：黑色和下划线

Demo here

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

这怎么可能？

【问题讨论】：

您是说<body> 中的所有内容都应该用text-decoration: underline; 下划线...只需删除该位并将其用于需要它的html 元素。
不能这样做，因为我希望正文具有 inlinde css。我使用 radeditor 作为电子邮件编辑器，需要设置为默认选项。
@Csdtesting 我已经编辑了你的问题，因为太多的内联样式使它无法阅读。
虽然我知道内联 css 是一种不好的做法，但我正在尝试使用 raeditor 作为电子邮件编辑器，并且它是通过默认选项的方式。所以结构类似于示例，我无法编辑它，我必须找到解决办法。

标签： html css

【解决方案1】：

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

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

【讨论】：

是的，我知道这是一种不好的做法，但我使用 radeditor 作为电子邮件编辑器，这是传递默认值的唯一方法。

【解决方案2】：

您可以使用 text-decoration 删除在祖先上设置的使用

display: inline-block;

由于在您的情况下您的元素是块，您可能还想要

width: 100%;

让它们更像块状。

Demo

【讨论】：

【解决方案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 的元素内联样式。