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

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

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

摘录：

内联框中的文字装饰是   走过整个元素，走了   没有任何后代元素   关注他们的   存在。 '文字装饰'   后代元素上的属性不能   对装饰有任何影响   元素
  。。。。
  一些用户代理   已实施文字装饰   传播装饰到   后代元素而不是   简单地通过绘制装饰   如上所述的元素。这个   可以说更宽松的人允许这样做   CSS2中的措辞。

我收到了来自http://csscreator.com/node/14951

的信息

Answer 2

在这些情况下，你摆脱了应用于父元素的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 3

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

的原因

ul > li.u

优先于：

ul > li > ul > li

指定了一个类，它比元素选择器的权重更大。

修改：您可以尝试的是：

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

并玩弄它（也许你必须使用 li.u 而不是 .u ）。

但，取决于您可能希望在 q ， em 或强中包含带下划线的部分的内容>标记并设置这些标记的样式而不是使用类。这样你就可以描述你的内容以及造型。

Answer 4

上面的

o.k.w.'s answer完全解释了为什么在没有其他更改的情况下你不能做你要求的事情。不，你不会生气！

可能的解决方法：

试试border-bottom？
在span class="u"标记中包含您想要带下划线的文字？（防止文本修饰装饰嵌套元素）
如果您无法更改标记，则可以添加一些脚本来完成与之前建议相同的操作。

祝你好运！

Answer 5

使用外部主题/ 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 6

.u {text-decoration: underline;}

如何使CSS文本修饰覆盖工作？

6 个答案: