gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:00:04 27 4
gpt4 key购买 nike

谁能告诉我为什么最后一个跨度是虚线?为什么它没有被覆盖?

可叉笔 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>

最佳答案

让我们逐条分解。

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

首先,特异性只考虑匹配开始元素的选择器。由于 divspan 是两个不同的东西,最后一条规则无关紧要,所以让我们去掉它:

div div div * span {
border: double;
}

div * * span {
border: dotted;
}

div * {
border: dashed;
}

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

第一条规则 div div div * span 与“第 6 行”元素不匹配,因为它的 div 祖先最多只能达到三层。最里面的divspan之间没有第四层,最外面的div的parent不是另一个div,但正文。所以实际匹配这个元素的仅有的两条规则是:

div * * span {
border: dotted;
}

div * {
border: dashed;
}

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

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

总而言之,由于虚线边框规则更具体,因此虚线边框规则不会覆盖它。

关于html - CSS 通配符选择器 - 没有覆盖?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53748235/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com