Html 我如何让这个 CSS 文本装饰覆盖工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1823341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get this CSS text-decoration override to work?
提问by soapergem
Some days I swear I'm going mad. This is one of those days. I thought my CSS was fairly straight-forward here, but it just doesn't seem to be working. What am I missing?
有些日子我发誓我要疯了。这是那些日子之一。我认为我的 CSS 在这里相当简单，但它似乎不起作用。我错过了什么？
My CSS looks like this:
我的 CSS 看起来像这样：
ul > li {
text-decoration: none;
}
ul > li.u {
text-decoration: underline;
}
ul > li > ul > li {
text-decoration: none;
}
ul > li > ul > li.u {
text-decoration: underline;
}
And my HTML looks like this:
我的 HTML 如下所示：
<ul>
<li>Should not be underlined</li>
<li class="u">Should be underlined
<ul>
<li>Should not be underlined</li>
<li class="u">Should be underlined</li>
</ul>
</li>
</ul>
Yet it comes up like this:
然而它是这样出现的：
回答by o.k.w
text-decorationdoes not behave the same as other font/text related styling like font-weight. Applying text-decorationwill affect all nested elements as well.
text-decoration与其他与字体/文本相关的样式（如font-weight. 应用text-decoration也会影响所有嵌套元素。
Check this out: http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration
看看这个：http: //www.w3.org/TR/CSS21/text.html#propdef-text-decoration
Excerpt:
摘抄：
Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence. The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the element
. . . .
Some user agents have implemented text-decoration by propagating the decoration to the descendant elements as opposed to simply drawing the decoration through the elements as described above. This was arguably allowed by the looser wording in CSS2.
内联框上的文本装饰是在整个元素上绘制的，跨越任何后代元素而不注意它们的存在。后代元素的 'text-decoration' 属性不会对元素的装饰产生任何影响
。. . .
一些用户代理通过将装饰传播到后代元素来实现文本装饰，而不是如上所述简单地通过元素绘制装饰。这可以说是 CSS2 中更宽松的措辞所允许的。
I've got the info from: http://csscreator.com/node/14951
我的信息来自：http: //csscreator.com/node/14951
回答by Oriol
You get rid of text-decorationapplied to a parent element in those cases:
text-decoration在这些情况下，您可以摆脱应用于父元素：
Out-of-flowelements, such as floated and absolutely positioned ones
li { float: left; /* Avoid text-decoration propagation from ul */ clear: both; /* One li per line */ } ul { overflow: hidden; } /* Clearfix */ul { overflow: hidden; /* Clearfix */ } li { float: left; /* Avoid text-decoration propagation from ul */ clear: both; /* One li per line */ } li.u { text-decoration: underline; }<ul> <li>Should not be underlined</li> <li class="u">Should be underlined <ul> <li>Should not be underlined</li> <li class="u">Should be underlined</li> </ul> </li> </ul>Atomic inline-levelelements, such as inline blocks and inline tables
But if you use
li{display:inline-block}, then you don't have bullets (you losedisplay:list-item) and the items appear one next to the others.Then, to have one item per line, you can use
li { display: inline-block; /* Avoid text-decoration propagation from ul */ width: 100%; /* One li per line */ }And to add the bullets, you can use
::beforepseudo-elements. However, bullets shouldn't be underlined, so you will need to take them out-of-flow or make them atomic inline-level too.li { display: inline-block; /* Avoid text-decoration propagation from ul */ width: 100%; /* One li per line */ } li:before { content: '? '; /* Insert bullet */ display: inline-block; /* Avoid text-decoration propagation from li */ white-space: pre-wrap; /* Don't collapse the whitespace */ } li.u { text-decoration: underline; }<ul> <li>Should not be underlined</li> <li class="u">Should be underlined <ul> <li>Should not be underlined</li> <li class="u">Should be underlined</li> </ul> </li> </ul>li { display: inline-block; /* Avoid text-decoration propagation from ul */ width: 100%; /* One li per line */ } li:before { content: '?'; /* Insert bullet */ position: absolute; /* Avoid text-decoration propagation from li */ margin-left: -.75em; } li.u { text-decoration: underline; }<ul> <li>Should not be underlined</li> <li class="u">Should be underlined <ul> <li>Should not be underlined</li> <li class="u">Should be underlined</li> </ul> </li> </ul>
流出元素，例如浮动元素和绝对定位元素
li { float: left; /* Avoid text-decoration propagation from ul */ clear: both; /* One li per line */ } ul { overflow: hidden; } /* Clearfix */ul { overflow: hidden; /* Clearfix */ } li { float: left; /* Avoid text-decoration propagation from ul */ clear: both; /* One li per line */ } li.u { text-decoration: underline; }<ul> <li>Should not be underlined</li> <li class="u">Should be underlined <ul> <li>Should not be underlined</li> <li class="u">Should be underlined</li> </ul> </li> </ul>原子内联级元素，例如内联块和内联表
但是如果你使用
li{display:inline-block}，那么你就没有子弹（你输了display:list-item）并且这些项目一个挨着其他项目出现。然后，要每行有一个项目，您可以使用
li { display: inline-block; /* Avoid text-decoration propagation from ul */ width: 100%; /* One li per line */ }要添加项目符号，您可以使用
::before伪元素。但是，项目符号不应带有下划线，因此您需要将它们移出流或使它们也成为原子内联级别。li { display: inline-block; /* Avoid text-decoration propagation from ul */ width: 100%; /* One li per line */ } li:before { content: '? '; /* Insert bullet */ display: inline-block; /* Avoid text-decoration propagation from li */ white-space: pre-wrap; /* Don't collapse the whitespace */ } li.u { text-decoration: underline; }<ul> <li>Should not be underlined</li> <li class="u">Should be underlined <ul> <li>Should not be underlined</li> <li class="u">Should be underlined</li> </ul> </li> </ul>li { display: inline-block; /* Avoid text-decoration propagation from ul */ width: 100%; /* One li per line */ } li:before { content: '?'; /* Insert bullet */ position: absolute; /* Avoid text-decoration propagation from li */ margin-left: -.75em; } li.u { text-decoration: underline; }<ul> <li>Should not be underlined</li> <li class="u">Should be underlined <ul> <li>Should not be underlined</li> <li class="u">Should be underlined</li> </ul> </li> </ul>
This behavior is specified in CSS 2.1and CSS Text Decoration Module Level 3:
此行为在CSS 2.1和CSS 文本装饰模块级别 3 中指定：
Note that text decorations are not propagated to any out-of-flow descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
请注意，文本修饰不会传播到任何流外后代，也不会传播到原子内联级后代（例如内联块和内联表）的内容。
回答by jeroen
The reason you′re seeing what you're seeing is that your rule
你看到你所看到的原因是你的规则
ul > li.u
takes preference over:
优先于：
ul > li > ul > li
as a class is specified and that has more weight than the element selectors together.
因为一个类被指定并且比元素选择器的权重更大。
Edit:What you could try is:
编辑：你可以尝试的是：
.u ul {
text-decoration: none;
}
.u {
text-decoration: underline;
}
and play around with that (perhaps you will have to use li.uinstead of just .u).
并尝试使用它（也许您将不得不使用li.u而不仅仅是.u）。
However, depending on the content you might want to wrap the underlined parts in q, emor strongtags and style these tags instead of using a class. That way you would be describing your content as well as styling it.
但是，根据内容，您可能希望将带下划线的部分包装在q、em或strong标签中并设置这些标签的样式，而不是使用类。这样您就可以描述您的内容并为其设置样式。
回答by Funka
o.k.w.'s answerabove explains perfectly why you can't do what you are asking without some other changes. No, you're not going mad!
okw上面的回答完美地解释了为什么你不能在没有其他改变的情况下做你所要求的。不，你不会生气！
Possible workarounds:
可能的解决方法：
- try
border-bottom? - wrap the text you want underlined in a
span class="u"tag? (to prevent the text-decoration from decorating nested elements) - if you aren't able to change the markup, you could add some scripting to accomplish the same as my previous suggestion.
- 试试
border-bottom？ - 将要加下划线的文本包裹在
span class="u"标签中？（防止文本装饰装饰嵌套元素） - 如果您无法更改标记，您可以添加一些脚本来完成与我之前的建议相同的操作。
Best of luck!
祝你好运！
回答by James
.u {text-decoration: underline;}
