时间戳

首页 > 解决方案 > CSS 后代选择器异常

css - CSS 后代选择器异常

问题描述

我阅读了后代选择器和子选择器之间的区别，并认为我已经理解了它，但是无论我使用第一个还是后者，我都得到了相同的结果。

我花了一段时间才明白该规则存在例外情况，并且在使用子选择器时不针对后代标签并不总是正确的。我不知道我在这里是否错了，但似乎您必须在后代标签上选择一种样式，否则即使您使用子选择器，您仍将定位后代标签。

这是一个示例，无论我使用什么，我都会得到相同的结果：

ul#firstUl > li{
  color:red;
  background-color: lightblue;
}
<div >
   <ul id="firstUl">
      <li> Child </li>
      <li> Child </li>
      <li> Child </li>
      <li>
        <ul>
           <li> Descendant </li>
        </ul>
      </li>
   </ul>
</div>

据我了解，带有文本“后代”的 li 标记不应该是这里的目标，但它是。那么我是否正确，如果后代标签尚未更改，那么您也将它们作为目标吗？

标签： csscss-selectors

解决方案

有趣的问题。所以基本上你是在red为一个li元素定义一种颜色。此颜色将应用于li. black因此，该规则正确应用，但是，一旦我们超出您的 css 规则范围，设置默认值（如下所示）将回退到 。

li {
  color: black;
}

ul#firstUl > li {
  color:red;
  background-color: lightblue;
}
<div >
   <ul id="firstUl">
      <li> Child </li>
      <li> Child </li>
      <li> Child </li>
      <li>
        <ul>
           <li> Descendant </li>
        </ul>
      </li>
   </ul>
</div>

推荐阅读