css高级选择器以及选择器权重计算

CSS高级选择器以及选择器权重计算

关系选择器

“该部分用 div.sample 和 div 来演示，可以替换其他元素”

1. 包含选择器：div.sample div （’ '衔接）

   • div.sample 为 div 的父元素
   • 包含在 div.sample 中的所有 div （包含跨代“儿子”“孙子”……元素）都会被选择

2. 子选择器：div.sample > div （'>'衔接）

   • 被选中的是 div.sample 的所有“儿子”元素（div）

3. 相邻选择器：div.sample + div （'+'衔接）

   • 二者要有相同的父元素
   • 被选择的是紧接着的下一个元素 - 即距离 div.asmple 最近的兄弟元素（div）

   *注意：这里的”一个“是指 以 sample 为类名的元素只有一个的情况

4. 兄弟选择器：div.sample ~ div （'~'衔接）

   • 被选择的是 div.sample 的之后的所有（不包括本身）兄弟元素（div）

属性选择器

选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr并且属性值为val的E元素（其中val区分大小写）
E[attr*=val]	选择匹配元素E，并且E元素定义了属性attr，其属性值包含了"val"，换句话说，字符串val与属性值中的任意位置相匹配
E[attr^=val]	选择匹配元素E，并且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，并且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr|=val	选择匹配元素E，并且E元素定义了属性attr，匹配的属性取值必须是完整且唯一的单词，或者使用’-'分隔
E[attr~=val	选择匹配元素E，并且E元素定义了属性attr，匹配的属性取值必须是完整的单词

*注意：并非只能设置一个属性，可以同时设置多个属性，只要都能匹配到就可以选择到想要的元素

伪类选择器

选择器	功能描述
:before	在对应元素前方插入一个元素
:after	在对应元素后方插入一个元素
:first-child	选择属于父元素的第一个指定的子元素
:last-child	选择属于父元素的最后一个指定的子元素
:nth-child(N)	选择属于父元素的指定位置的指定的子元素
:nth-of-type(N)	选择属于父元素指定的元素指定位置的子元素

选择器的权重计算

权重值表

要计算权值，首先要了解各种选择器所对应的权重值，如下表：（从上至下权重依次降低）

选择器	权重值
行内样式 style="……"	1，0，0，0
ID选择器 #id-name	0，1，0，0
类选择器 .class-name 、属性选择器 [id="……"]……	0，0，1，0
元素和伪元素选择器 div p ……	0，0，0，1
关系选择器、通配符、子选择器、相邻选择器等 '*'、'>'、'+'、' '	0，0，0，0

继承的样式没有权值

!important为强制优先

权值计算的理论

将一条完整的选择器全部以最小单元拆分开来，将这些拆分出来的选择器分别对应权重表记录，然后对应位置相加

举例：ul#id-name li[class="xx"] a.class-name

这个完整的选择器可以拆分为：ul 元素选择器、#id-name ID选择器、li 元素选择器、[class="xx"] 属性选择器、a 元素选择器、 .class-name 类选择器

对应权重表，即为：

0,0,0,1

0,1,0,0

0,0,0,1

0,0,1,0

0,0,0,1

0,0,1,0

————

0,1,2,3（对应位相加）

这个就是这个选择器的最终权重值

权重值的比较

从左往右逐个等级比较，决出高下则停止，不继续向右比较，前一等级相等则往后比

举例：

0,1,2,3

VS

0,1,3,1

0,1,3,1获胜，权重更大

实际案例练习

根据代码判断最终的两个 <h2> 标签会显示为哪种颜色

html代码：

<div id="container>
	<div id="header">
		<h2>这是第一个h2标签</h2>
		<p>这是一段普通文本</p>
		<div class="paragraph">
			<h2 class="first">这是第二个h2标签</h2>
			<p>这也是一段普通文本</p>
		</div>
	</div>
</div>

第一段css代码：（第一个 <h2> 标签）

#container div#header h2 {
color: red;
}
#container #header>h2{
color: blue;
}
body #container div[id="header"] h2{
color: green;
}

第二段css代码：（第二个 <h2> 标签）

#header div.paragraph h2{
color: orangered;
}
#header[class="paragraph"] h2{
color: yellow;
}
div#header div.paragraph h2.first{
color: pink;
}

不公布答案，计算出结果后可以复制这三段代码亲自试验。