有些日子我感觉自己要疯了，今天就是这样一天。我认为我的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中使用了更宽松的措辞，这可以说是允许的。
display: inline-block; 来清除项目的文本装饰。https://dev59.com/JnjZa4cB1Zd3GeqPcEcT#19529256 - mikegertrudestext-decoration：
Out-of-flow elements, 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-level elements, such as inline blocks and inline tables
But if you use li{display:inline-block}, then you don't have bullets (you lose display: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 ::before pseudo-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 元素内部的一个 div 上使用 inline:block，这样就不会失去项目符号。 - Omuul > li.u
ul > li > ul > li
.u ul {
text-decoration: none;
}
.u {
text-decoration: underline;
}
玩弄它（也许你需要使用 li.u 而不是只有 .u）。
然而，根据内容的不同，您可能想要将下划线部分包装在 q、em 或 strong 标签中，并样式化这些标签，而不是使用类。这样，您就可以描述您的内容并样式化它。
上面的o.k.w.答案 很好地解释了为什么你不能在不进行其他更改的情况下实现你所要求的。 不，你没有发疯！
可能的解决方法：
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;}