Question

有人可以告诉我为什么最后一个跨度是点划线吗？为什么不覆盖？

div div div * span {
  border: double;
}

div * * span {
  border: dotted;
}

div * {
  border: dashed;
}

div {
  border: none;
}

<div>
  Line 1
  <br>
  <span>Line 2</span>
  <br>
  <div>
    Line 3
    <br>
    <span>Line 4</span>
    <br>
    <div>
      Line 5
      <br>
      <span>Line 6</span>
      <br>
    </div>
  </div>

</div>

Answer 1

让我们按规则细分这个问题。

让我们假设您已经听说过术语特异性，正如其他人在评论中提到的那样。但是，让我们假设您除了对问题有任何了解之外对它一无所知，或者您已经阅读了给您的链接，但是在将知识应用于特定问题时遇到了困难。 / p>

开始时，特异性仅考虑与元素匹配的选择器。由于div和span是两个不同的事物，所以最后一条规则是不相关的，所以让我们摆脱它：

div div div * span {
  border: double;
}

div * * span {
  border: dotted;
}

div * {
  border: dashed;
}

现在我们有三个规则，其中两个规则专门要求span，第三个规则是任何元素。

第一个规则div div div * span与“第6行”元素不匹配，因为它的div祖先最多可以升至三个级别。最里面的div和span之间没有第四级，最外面的div的父级不是另一个div，而是body。因此，实际上与该元素匹配的仅有两个规则是：

div * * span {
  border: dotted;
}

div * {
  border: dashed;
}

现在我们可以谈谈特异性。通用选择器*的特异性为零。您所有的规则都只有类型选择器和/或通用选择器，因此计算其特异性非常简单：

div * * span /* 2 types -> specificity = (0, 0, 2) */
div *        /* 1 type  -> specificity = (0, 0, 1) */

最后，由于虚线边框规则更具体，虚线边框规则不会覆盖它。

CSS通配符选择器-没有覆盖？

1 个答案: