css - 特异性和直接靶向-6ren

css - 特异性和直接靶向

转载作者：行者123 更新时间：2023-11-28 08:44:35

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

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

.main 类分数为 10，其中的所有文本都应应用规则集，除非有 ID
p span 选择器是 2，它获胜的原因是它是直接定位的(尽管特异性得分较低？这就是我的困惑所在)。

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

在应用特异性规则和计算特异性之前，如果元素被直接定位，特异性规则不适用并且直接目标总是优先(就像我发布的例子)，这样说是否正确？如果是这样的话，就我自己的心智模型而言，我更愿意使用 CSS 图来计算特异性:

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

最佳答案

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

不，我会说这是不正确的。我不会纠结于“直接针对”这个短语……从某种意义上说，所有 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/

文章推荐： php - Bootstrap 的 onmouseover 错误

文章推荐： javascript - 如何延迟 JavaScript 的加载

文章推荐： ios - 无意的类嵌套 - 代码运行 10 次太频繁 (Swift)

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 特异性和直接靶向