特异性和直接靶向

Question

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

我正在失去具体实践的范围。在下面的代码片段中，即使一些特异性规则比其他规则 "higher"，应用的特异性较低，例如

/* 0001 */

span {
  color: red;
}


/* 0001 */

p {
  color: blue;
}


/* 0010 */

.main {
  color: orange;
}


/* 0100 */

#h4-id {
  color: limegreen;
}


/* 0002 */

div h4 {
  color: purple;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body class='main'>
  <h3>this should be orange</h3>

  <div id='h4-id'>
    <h4>ID Selector</h4>
  </div>

  <p>
    text inside paragraph
    <span>hello world</span>
  </p>
</body>

</html>

有一个 div，ID 为 h4-id。该规则将所有文本设置为石灰绿。

还有另一个选择器具有较低的特异性 div h4，此规则 "wins" 并应用该规则中的声明。

我相信原因是它是 "direct" target。

这是另一个例子：

  /* 0002 */

p span {
  /*     font-size: 200px; */
  text-decoration: underline dotted red;
  font-style: normal;
  color: teal;
  background-color: yellow;
}

/* 0001 */

span {
 background-color: teal;

}


/* 0010 */

.main {
  font-family: monospace;
  color: blue;
  font-size: 22px;
  background-color: lightgrey;
}


/*  0001 */

p {
  font-family: cursive;
  color: indigo;
  font-size: 100px;
  background-color: limegreen;
  font-style: italic;
  text-decoration: underline;

<p class='main'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <span>eiusmod tempor incididunt</span> ut Tristique magna sit amet purus gravida quis blandit turpis. Tellus elementum sagittis vitae et. Faucibus pulvinar <span>elementum integer enim neque</span>  volutpat ac tincidunt vitae. At tempor commodo ullamcorper a.
</p>https://whosebug.com/questions/ask#

在这个例子中，低特异性再次获胜，但这些是 "direct targets"（我相信），这就是他们获胜的原因。 class "main" 没有比后代选择器 p span 更高的优先级。

.main class 得分为 10，其中的所有文本都应应用规则集，除非有 ID
p span选择器是2，之所以获胜是因为它是直接针对的（尽管特异性得分较低？这就是我的困惑所在）。

这是我一直在阅读的众多文章和参考文献之一 solidify my knowledge of specificity

在应用特异性规则和计算特异性之前，如果元素是直接定位的，特异性规则不适用并且直接目标始终优先（就像我发布的示例），这样说是否正确？如果是这样的话，就我自己的心智模型而言，我更喜欢使用 CSS 图来计算特异性：

false, 0, 0, 0, 0（false 表示它不是直接目标，也可以始终为 1 或 0）。这是有效的推理吗？

Answer 1

I'm losing scope of where specificity comes into practice

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

评估应用于不同元素的样式时，即使该样式是从祖先继承而来的，特异性也无关紧要。

Is it correct to say, before applying specificity rules and calculating specificity, if the element is directly targeted, specificity rules do not apply and the direct target always takes precedence

不，我会说这是不正确的。我不会陷入短语 "directly targeted"... 在某种意义上所有 CSS 选择器都直接针对一组元素，但该规则集的某些属性可以级联到后代，例如color。继承的样式也不会从它们起源的规则集中继承特殊性；否则，要更改子元素的颜色，您每次都必须匹配或击败特异性。

例如，以下代码段中的文本是红色的，因为 #main（选择器）比 div（选择器）具有更高的特异性，并且样式应用于 相同元素:

#main {
  color: red;
}

div {
  color: blue;
}

<div id="main">text</div>

但是，在下一个示例中，p 获胜，因为选择器影响 不同的元素:

#main {
  color: red;
}

p {
  color: blue;
}

<div id="main">
  <p>text</p>
</div>

现在，以最后一个例子为例，添加一个新的更具体的选择器，将颜色应用于p:

#main {
  color: red;
}

p {
  color: blue;
}

#main p {
  color: green;
}

<div id="main">
  <p>text</p>
</div>

文本现在是绿色的，因为选择器 #main p (0,1,0,1) 高于选择器 p (0,0,0,1) 并且两个选择器都影响相同的元素。

Answer 2

首先，请注意 color 是一个 inherited property:

When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element.

因此，如果没有 color 属性直接应用于元素，它将从其父项继承其值。

现在看看这个例子：

/*Rule A*/
#divId {
  color: orange;
}

/*Rule B*/
.divClass {
  color: green;
}

/*Rule C*/
div {
  color: blue;
}

<div id="divId" class="divClass">
  div 1 (id="divId" class="divClass")
  <div class="divClass">
    div 2 (class="divClass")
    <div>
      div 3
      <span> and a span</span>
    </div>
  </div>
</div>

我们有 3 个 div 和一个 span。让我们分解一下每个颜色是如何获得的：

Div 1 是规则 A、B 和 C 的目标。规则 A 具有最高的特异性，因为它使用了 id 选择器。
Div 2 是规则 B 和 C 的目标。规则 B 具有更高的特异性，因为它使用了 class 选择器。
Div 3 仅适用于规则 C。
跨度不是任何 css 规则的目标。所以它会从它的父级继承它的颜色，div 3.

特异性和直接靶向

Specificity and Direct Targeting

css

css-selectors

css-specificity