有些日子我发誓我要疯了。这是那些日子之一。我认为我的 CSS 在这里相当简单，但它似乎不起作用。我错过了什么？
我的 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;
}
我的 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>
然而它是这样出现的：
text-decoration与其他字体/文本相关样式（如font-weight. 应用text-decoration也会影响所有嵌套元素。
看看这个： http ://www.w3.org/TR/CSS21/text.html#propdef-text-decoration
摘抄：
内联框上的文本装饰被绘制在整个元素上，跨越任何后代元素，而不注意它们的存在。后代元素上的 'text-decoration' 属性不能对元素的装饰产生任何影响
。. . .
一些用户代理通过将装饰传播到后代元素来实现文本装饰，而不是像上面描述的那样简单地通过元素绘制装饰。这可以说是 CSS2 中较为宽松的措辞所允许的。
在这些情况下，您摆脱了text-decoration应用于父元素：
流外元素，例如浮动元素和绝对定位元素
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>此行为在CSS 2.1和CSS 文本装饰模块 3 级中指定：
请注意，文本修饰不会传播到任何流出的后代，也不会传播到原子内联级后代的内容，例如内联块和内联表。
你看到你所看到的原因是你的规则
ul > li.u
优先于：
ul > li > ul > li
作为一个类被指定，并且比元素选择器加在一起的权重更大。
编辑：你可以尝试的是：
.u ul {
text-decoration: none;
}
.u {
text-decoration: underline;
}
并玩弄它（也许您将不得不使用li.u而不仅仅是.u）。
但是，根据内容，您可能希望将带下划线的部分包装在q、em或strong标签中，并为这些标签设置样式而不是使用类。这样，您将描述您的内容并对其进行样式设置。
okw上面的回答完美地解释了为什么如果没有其他一些改变你就不能做你所要求的。不，你不会生气的！
可能的解决方法：
border-bottom？span class="u"标签中？（防止文本装饰装饰嵌套元素）祝你好运！
我在使用外部主题/CSS 时遇到了类似的问题，所以我无法修改它以删除text-decoration: none;. 就我而言，我有一个带有链接的子元素，但该链接没有按预期加下划线。我尝试display: inline-block;像其他人提到的那样使用，但它没有效果。
对我有用的是覆盖text-decoration你所做的，但也包括!important强制它覆盖父母的text-decoration.
// Defined in an external CSS, so I couldn't modify it.
.footer {
text-decoration: none;
}
// In my CSS file.
.footer a {
text-decoration: underline !important;
}
因此，对于您的特定示例，我想这可能会起作用（我没有对其进行测试以确认）：
ul > li > ul > li {
text-decoration: none !important;
}
我发现的最干净的方法就是将下划线设置为背景颜色。
.u {text-decoration: underline;}