文章/答案/技术大牛

发布

社区首页 >问答首页 >特异性和直接靶向性

问特异性和直接靶向性
EN

Stack Overflow用户

提问于 2018-08-29 16:14:01

回答 2查看 173关注 0票数 4

我在我对特定性的理解和目标元素之间运行循环。我理解特异性的基本概念，并阅读了许多关于如何使用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选择器，此规则"wins“并应用该规则中的声明。

我相信原因是它是一个“直接”目标。

下面是另一个例子：

  /* 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，这是因为它是直接的目标(即使特异性分数较低？)这就是我困惑的地方)。

以下是我一直在读到巩固我的专一知识的许多类型的文章和参考资料之一

在应用特异性规则和计算特定性之前，如果元素是直接目标的，那么是否正确地说，不适用特定规则，而直接目标总是优先(如我发布的例子)？如果是这样的话，仅针对我自己的心智模型，我更愿意使用CSS图来计算特定性，如下所示：

false, 0, 0, 0, 0 (false意味着它不是直接的目标，这也可能是1或0)。这是合理的理由吗？

css

css-selectors

css-specificity

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-08-29 17:00:52

我正在失去具体性在哪里付诸实施的范围

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

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

在应用专用性规则和计算特定性之前，如果元素是直接目标的，则特异性规则不适用，直接目标总是优先于，这是否正确？

不，我想说这是不正确的。我不会被“直接瞄准”这句话所困扰.从某种意义上说，所有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)，这两个选择器都会影响相同的元素。

票数 2

Stack Overflow用户

发布于 2018-08-29 17:56:26

首先，注意color是一个继承财产

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

因此，如果没有直接应用于元素的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规则都不针对span。因此，它将继承它的颜色从它的父，div 3。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52081960

复制

相似问题

问特异性和直接靶向性
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问特异性和直接靶向性EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问特异性和直接靶向性
EN