Question

在我对特异性的了解和针对某个元素之间的循环中。我了解特异性的基本概念，并阅读了许多有关如何使用a，b，c，d计算特异性的文章，其中d是最低的特异性，a是最高的。

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

/* 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的选择器，该规则“获胜”，并且应用了该规则中的声明。

我相信原因是它是"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://stackoverflow.com/questions/ask#

在此示例中，较低的特异性再次获胜，但是这些是“直接目标”（我相信），这就是它们获胜的原因。与后代选择器p span相比，类“ main”没有更高的优先级。

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

这是我一直在阅读solidify my knowledge of specificity

的众多文章和参考文献之一

在应用特异性规则并计算特异性之前，如果元素是直接针对的，则不适用特异性规则，并且直接针对的对象始终优先（如我发布的示例），这是正确的吗？如果是这种情况，那么就我自己的心理模型而言，我宁愿使用CSS图这样计算特异性：

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

Answer 1

我正在失去具体实践的范围

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

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

在应用特异性规则和计算特异性之前，如果元素是直接靶向的，特异性规则不适用且直接靶向始终优先

不，我会说这是不正确的。从某种意义上说，我不会被“直接针对”一词所笼罩……从某种意义上说，所有CSS选择器都直接针对一组元素，但是该规则集的某些属性可以级联到后代，例如color 。继承的样式也不会从它们所源自的规则集中继承其特异性。否则，要更改子元素的颜色，您每次都必须匹配或超过其特异性。

例如，以下代码段中的文本为红色，因为#main（选择器）的特异性高于div（选择器），并且样式应用于 same元素：

#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：

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

因此，如果没有将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具有更高的特异性，因为它使用了类选择器。
Div 3仅受规则C定位。
该跨度不受任何CSS规则的限制。因此它将从其父div 3继承其颜色。

特异性和直接靶向

2 个答案: