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

【问题标题】：CSS Wildcard Selector - No override?CSS 通配符选择器 - 没有覆盖？
【发布时间】：2019-05-13 20:46:46
【问题描述】：

谁能告诉我为什么最后一个跨度是点缀的？为什么不被覆盖？

可分叉的笔 https://codepen.io/anon/pen/pqjREd

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>

【问题讨论】：

特异性我建议你查一下 - specificity.keegan.st
你希望覆盖什么规则？
作为@Paulie_D 评论的扩展，请参阅specificity calculator 和随附的w3 specificity 文档...
div * * span 没有多大意义
@j08691：这匹配至少是 div 的曾孙的跨度。这不是你在现实世界的 CSS 中经常遇到的东西，这是肯定的......

标签： html css css-selectors css-specificity

【解决方案1】：

让我们逐条分解这条规则。

假设您现在已经听说过特异性一词，正如其他人在 cmets 中提到的那样。但是让我们假设您对它一无所知，除了它与您的问题有关，或者您已经阅读了给您的链接，但您无法将这些知识应用于这个特定问题。

首先，特异性只考虑与开始元素匹配的选择器。因为 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) */

总之，因为虚线边框规则更具体，虚线边框规则不会覆盖它。

【讨论】：