如何使css文本-装饰覆盖工作？

Question

如何使css文本-装饰覆盖工作？有时候我发誓我要疯了。今天是那种日子。我认为我的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>

Answer 1

你摆脱了text-decoration在这些情况下应用于父元素：

• 无流元素，如浮动元素和绝对定位元素。

  li { float: left; /* Avoid text-decoration propagation from ul */ clear: both; /* One li per line */ } 
  ul { overflow: hidden; } /* Clearfix */

  
  

  显示代码段

  
  

• 原子内联级元素，例如内联块和内联表。

  但如果你用li{display:inline-block}，那你就没有子弹了(你输了display:list-item)和项目出现在一个旁边的其他。

  然后，要有一行一项，可以使用

  li { display: inline-block; /* Avoid text-decoration propagation from ul */ width: 100%; /* One li per line */ }

  加上子弹，你可以用::before伪元素。然而，子弹不应该加下划线，所以你需要把它们从流中取出来，或者把它们变成原子的内联级。

  
  

  显示代码段

  
  

  
  

  显示代码段

  
  

---

中指定此行为。CSS 2.1和CSS文本装饰模块级别3:

请注意，文本装饰不会传播到任何流外后代，也不会传播到原子内联级子代(如内联块和内联表)的内容。

Answer 2

好的答案上面完美地解释了为什么在没有其他改变的情况下你不能做你想做的事情。不，你不会疯的！

可能的解决办法：

• 试一试

  border-bottom?

• 将想要加下划线的文本包装在

  span class="u"

  标签？(以防止文本装饰嵌套元素)
• 如果您无法更改标记，则可以添加一些脚本以完成与我先前建议相同的任务。

祝你好运！