如何使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

text-decoration不像其他字体/文本相关的样式一样font-weight.应用text-decoration也会影响所有嵌套元素.

请查看:http: //www.w3.org/TR/CSS21/text.html#propdef-text-decoration

摘抄:

内联框中的文本装饰在整个元素上绘制,遍历任何后代元素,而不关注它们的存在.后代元素上的'text-decoration'属性不会对元素的装饰产生任何影响
....
一些用户代理通过将装饰传播到后代元素来实现文本修饰,而不是简单地通过如上所述的元素绘制装饰.这可以说是CSS2中更宽松的措辞所允许的.

我从以下网址获得了信息:http://csscreator.com/node/14951

Answer 2

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中指定:

请注意,文本修饰不会传播到任何流出的后代,也不会传播到原子内联级后代(如内联块和内联表)的内容.