|
前言：
关于CSS的选取器优先级我在w3school文档中并无看到对应说明，网上比较笼统的说法是:
“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选取 > 伪对象 > 继承 > 通配符”。
那 么这个次序是怎么得出来的呢？实质上在CSS2规范关于详细性(specificity)的定义中，描述是非常知道的，然则非常多中文版本的css图书中采 用了10进制的简单相加计算方式（包含第1版《CSS权威指南》，第二版中已然纠正）。因此呢把规范中对CSS层叠优先级的关联定义意译一下，期盼对权重计算尚有疑惑的伴侣供给有些参考。
按照CSS规范，详细性越知道的样式规则，权重值越高。计算权重值的依据，并不是许多文案所描述的那样“class是10，标签是1，ID是100”之类——虽然这般在大都数状况下能够得到正确的结果。但亦易显现非常多耐人费解的地区。
见代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
//样式一
#child{
color:red;
}
//样式二
#parent>p>h1>span{
color:blue;
}
</style>
<title>css选取器权值对比</title>
</head>
<body>
<div id="parent">
<p>
<h1>
<span id="child">css选取器权值对比</span>
</h1>
</p>
</div>
</body>
</html>
根据之前说法，ID选取器优先级大于子选取器，代码运行结果应该是红色字体。而实质运行结果却为蓝色字体:
运行结果选取器权重值的计算
A：倘若规则是写在标签的style属性中（内联样式），则A=1，否则，A=0. 针对内联样式，因为无选取器，因此B、C、D的值都为0，即A=1, B=0, C=0, D=0（简写为1,0,0,0，下同）；
B：计算该选取器中ID的数量。（例如，#header 这般的选取器，计算为0, 1, 0, 0）；
C：计算该选取器中伪类及其它属性的数量（包含class、属性选取器等，不包含伪元素）。 （例如，.logo[id=site-logo] 这般的选取器，计算为0, 0, 2, 0）；
D：计算该选取器中伪元素及标签的数量。（例如，p:first-letter 这般的选取器，计算为0, 0, 0, 2）。
CSS2规范中给出的有些例子：
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /*
| 
发表于 2024-6-30 06:54:40
