css - 特异性和直接靶向

我在我对特异性的理解和针对一个元素之间运行循环。我了解特异性的基本概念，并阅读了大量关于如何使用 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>

有一个 ID 为 div 的 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#

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

.main 类的分数是 10，它里面的所有文本都应该应用规则集，除非有一个 ID

p span 选择器是 2，它获胜的原因是它是直接针对的(即使特异性分数较低？这就是我的困惑所在)。

这是我一直在阅读 solidify my knowledge of specificity 的多种类型的文章和引用资料之一

是否正确地说，在应用特异性规则和计算特异性之前，如果元素是直接定位的，则不适用特异性规则并且直接目标始终优先(如我发布的示例)？如果是这种情况，就我自己的心智模型而言，我更喜欢使用 CSS 图来计算特异性:
false, 0, 0, 0, 0(false 表示它不是直接目标，也可以始终为 1 或 0)。这是有效的推理吗？

最佳答案

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

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

不，我会说这是不正确的。我不会被“直接定位”这句话所包围……从某种意义上说，所有 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) 并且两个选择器影响相同的元素。

关于css - 特异性和直接靶向，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52081960/