如何让这个 CSS 文本装饰覆盖工作？

Question

有时候我发誓我要疯了。这是那些日子之一。我认为我的 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

我发现的最简洁的方法就是将下划线设置为背景颜色。

Answer 2

我在使用外部主题/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;
}

Answer 3

在这些情况下，您可以摆脱应用于父元素的text-decoration：

• Out-of-flow 元素，例如浮动和绝对定位的元素

  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 元素，例如内联块和内联表

  但是如果你使用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 Text Decoration Module Level 3 中指定：

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

Answer 4

你看到你所看到的原因是你的规则

ul > li.u

优先于：

ul > li > ul > li

作为一个指定的类，它比元素选择器加起来的权重更大。

编辑：你可以尝试的是：

.u ul {
        text-decoration: none;
}
.u {
        text-decoration: underline;
}

并尝试使用它（也许您将不得不使用 li.u 而不仅仅是 .u）。

然而，根据内容，您可能希望将下划线部分包含在 q、em 或 strong 中> 标签和样式这些标签，而不是使用一个类。这样您就可以描述您的内容并为其设置样式。

Answer 5

o.k.w.'s answer 上面完美地解释了为什么如果没有其他一些更改，您就不能按照您的要求进行操作。不，你不会生气的！

可能的解决方法：

• 试试border-bottom?
• 用span class="u"标签包裹你想要下划线的文本？ （防止 text-decoration 装饰嵌套元素）
• 如果您无法更改标记，您可以添加一些脚本来完成我之前的建议。

祝你好运！

Answer 6

text-decoration 的行为与其他与字体/文本相关的样式（如 font-weight）不同。应用text-decoration 也会影响所有嵌套元素。

检查一下： http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

摘录：

内联框中的文本装饰是 画在整个元素上，去 跨越任何后代元素 关注他们的 在场。 '文本装饰' 后代元素的属性不能 对装修有什么影响 元素
. . . .
一些用户代理 已经实现了文本装饰 将装饰传播到 后代元素，而不是 简单地画出装饰 如上所述的元素。这 可以说是宽松的允许 CSS2 中的措辞。

我的信息来自：http://csscreator.com/node/14951

Answer 7

.u {text-decoration: underline;}