Css 特异性和直接靶向性

我在我对特定性的理解和目标元素之间运行循环。我理解特异性的基本概念，并阅读了大量关于如何使用a、b、c、d计算特异性的文章，其中d是最低的特异性，a是最高的

我正在失去将具体化应用于实践的范围。在下面的代码片段中，即使某些特定性规则比其他规则“更高”，也会应用较低的特定性，例如

/*0001*/
跨度{
颜色：红色；
}
/* 0001 */
p{
颜色：蓝色；
}
/* 0010 */
梅因先生{
颜色：橙色；
}
/* 0100 */
#h4 id{
颜色：柠檬黄；
}
/* 0002 */
分区h4{
颜色：紫色；
}

JS-Bin
这应该是橙色的
ID选择符

段落内的文字
你好，世界

我正在失去将具体化应用于实践的范围

当两个或多个相互竞争的选择器将样式应用于同一个元素时，特异性很重要-具有更高特异性的规则获胜

---

在评估应用于不同元素的样式时，特定性并不重要，即使该样式是从祖先继承的

在应用特异性规则和计算特异性之前，如果元素是直接目标，特异性规则不适用，且直接目标始终优先，这是否正确

不，我认为这是不正确的。我不会被“直接瞄准”这句话迷住。。。从某种意义上说，所有CSS选择器都直接针对一组元素，但该规则集的某些属性可以级联到后代，如

color

。继承的样式也不会从其起源的规则集继承特定性；否则，要更改子元素的颜色，您每次都必须匹配或击败特定性

例如，以下代码段中的文本为红色，因为

#main

（选择器）比

div

（选择器）具有更高的特异性，并且样式应用于同一元素：

#主{
颜色：红色；
}
div{
颜色：蓝色；
}

---

text

首先，请注意

color

是一种：

如果未在元素上指定继承属性的值，则该元素将在其父元素上获取该属性的计算值

因此，如果没有

color

属性直接应用于元素，它将从其父元素继承其值

现在看一看这个例子：

/*规则A*/
#迪维德{
颜色：橙色；
}
/*规则B*/
.divClass{
颜色：绿色；
}
/*规则C*/
div{
颜色：蓝色；
}

div 1（id=“divId”class=“divClass”）
第2分部（class=“divClass”）
第3组
还有一个跨度

您忘记了一条规则：继承发生在万不得已的情况下，您无法比较两个不针对同一元素的选择器。将颜色替换为另一个非继承属性，您将了解“在评估应用于不同元素的样式时，特殊性并不重要，即使该样式来自级联。”事实上，级联解析本身以每个元素为基础。级联和继承是两个截然不同的概念-样式不是说从祖先级联到后代，而是在没有级联值的情况下从祖先继承的。@BoltClock感谢您指出这一点-希望我上次的编辑更准确。