特异性和直接靶向
Posted
技术标签:
【中文标题】特异性和直接靶向【英文标题】：Specificity and Direct Targeting 【发布时间】：2019-02-04 12:13:24 【问题描述】：我在对特异性的理解和定位元素之间循环往复。我了解特异性的基本概念，并阅读了许多关于如何使用 a、b、c、d 计算特异性的文章，其中 d 是最低的特异性，a 是最高的。
我正在失去具体实践的范围。在下面的 sn-p 中，即使某些特异性规则比其他规则“更高”，也会应用较低的特异性，例如
/* 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://***.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）。这是有效的推理吗？
【问题讨论】：
您忘记了一条规则：继承发生在最后一招，您无法比较两个不针对同一元素的选择器。用另一个不继承的属性替换颜色，你就会明白 【参考方案1】：我正在失去具体实践的范围
当两个或多个竞争选择器将样式应用于相同的元素时，特异性很重要 - 具有更高特异性的规则获胜。
在评估应用于不同元素的样式时，特定性并不重要，即使该样式是从祖先继承的。
这样说对吗，在应用特异性规则和计算特异性之前，如果直接针对元素，特异性规则不适用，直接目标总是优先
不，我会说这是不正确的。我不会被“直接定位”这个短语所包围……从某种意义上说，所有 CSS 选择器都直接针对一组元素，但是该规则集的某些属性可以级联到后代，例如 color。继承的样式也不继承它们起源的规则集的特殊性；否则，要更改子元素的颜色，您必须每次都匹配或击败特定性。
例如，下面sn-p中的文本是红色的，因为#main（选择器）比div（选择器）具有更高的特异性，并且样式应用于相同的元素 em>：
#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)，并且两个选择器影响同一个元素。
【讨论】：
“在评估应用于不同元素的样式时，特异性并不重要，即使该样式来自级联。”事实上，级联解析本身无论如何都是在每个元素的基础上发生的。级联和继承是两个不同的概念 - 样式并不是从祖先级联到后代，而是在没有级联值时从祖先继承。 @BoltClock 感谢您指出这一点 - 希望我的上次编辑更准确。【参考方案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 个divs 和一个span。让我们分解一下每种颜色的颜色：
【讨论】：
以上是关于特异性和直接靶向的主要内容，如果未能解决你的问题，请参考以下文章
Untargeted lipidomics reveals specific lipid abnormality in nonfunctioning human pituitary adenomas
mCRPC肝转移︱行177Lu-PSMA-617 RLT患者的治疗反应和结局