Question

我想弄清楚为什么“第一项”在下面没有显示为橙色。根据特异性规则，选择器.one.two应该具有20的特异性得分（两个类）。 .one li应该有11个（一个类，一个元素）。所以它感觉它应该显示为橙色，而不是蓝色。

知道为什么不这样做吗？

另外，作为一个附带问题，为什么.one选择器中的.two和.one.two之间没有空格？这似乎适用于Chrome，但不适用于here。

<!DOCTYPE html>
<html>

<head>
  <style>
    .one {
      color: red;
    }
    .two {
      color: green;
    }
    .one li {
      color: blue;
    }
    .one.two {
      color: orange;
    }
  </style>
</head>

<body>
  <div>
    <ul class="one two">
      <li>Item One</li>
    </ul>
  </div>
</body>

</html>

Answer 1

所以感觉它应该显示为橙色，而不是蓝色。

知道它为什么没有？

您的ul 为橙色。但是您的li颜色为蓝色，与其父颜色无关，因为您已明确定位并为其应用了颜色。如果覆盖隐式color: inherit，它将不会继承其父颜色。

为什么我的.one.two选择器中的.one和.two之间没有空格？

因为这是一个完全不同的选择器。 .one .two匹配.two 内部 a .one。 .one.two（没有空格）匹配同时为.one和.two的元素。

<div class="one">
  <div class="two"></div> /* matched by .one .two */
</div>

<div class="one two"></div> /* matched by .one.two */

Answer 2

你的css工作正常，但也有这个css

.one li {
  color: blue;
}

所以你的css在.one.two上应用橙色，但.one li css重叠并显示蓝色。

如果您希望在.one.two

下的li上使用橙色，则可以添加此css

.one.two li {
  color: orange;
}

Answer 3

您需要在li

之后在选择器中添加.one.two

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style>
    .one {
      color: red;
    }
    .two {
      color: green;
    }
    .one li {
      color: blue;
    }
    .one.two li {
      color: orange;
    }
  </style>
</head>

<body>
  <div>
    <ul class="one two">
      <li>Item One</li>
    </ul>
  </div>
</body>

</html>

＆＃13;

嵌套CSS选择器的特殊性

3 个答案: