css中的选择器及其权重

在 css (层叠样式表)中对 html 中的元素设定具体的样式，主要由选择器和声明块两个部分组成。选择器是用于指定所设置的样式对应的 html 标签。声明块由若干个用分号分开的样式声明组成，这些样式声明的属性和属性值以“键值对”(属性：属性值）的形式出现，当出现多个属性值时使用空格隔开。具体是为哪些元素设定样式由选择器决定，当出现样式层叠时（使用不同的选择器但是匹配到的是同一个元素且设置的是同一个样式属性）由选择器的权重或者在样式表中的位置决定。以下是对选择器和其权重的总结复习。

基本选择器

通配符选择器

通配符选择器使用 " * " 来定义，用来匹配所有的元素，他的权重是 0,0,0,0，常用于清除浏览器的默认样式。

* {
    
    
	background-color:yellow; 
} 
/*匹配所有的元素并为他们设置 background-color 属性*/
div * {
    
    
	background-color:yellow;
} 
/*匹配div元素内的所有元素并为他们设置 background-color 属性*/

标签选择器

标签选择器使用 “elementName” 来定义，标签选择器（元素选择器）是指用 html 标签名作为选择器，按标签名称分类，为页面中的某一类标签指定统一的 css 样式。标签选择器的权重是 0,0,0,1。

span {
    
    
	color:red;
}
/*为所有的span标签设置color属性*/

作用：标签选择器可以把某一类标签全部选择出来，比如所有的<span>标签。
优点：能为页面中的同类型标签统一设置样式。
缺点：不能设置差异化样式，只能选择全部当前标签。

类选择器

类选择器使用 “.className” 来定义,如果想要差异性选择不同的标签，单独挑一个或者某几个标签，可以使用类选择器。（可以把一些标签元素共同具有的样式放到同一个类里面，这些元素可以调用这个公共的类然后再调用自己独有的类）。

<style>
.cont {
     
     
	margin:0 auto;
}
/*这三个元素具有相同的margin属性样式所以将他们放在同一个类中*/
.last {
     
     
	background-color:yellow;
}
/*background-color属性是最后一个元素独有的属性样式（或和其他的元素的属性值不同），所以可以调用它独有的类。*/
</style>
<div class="cont info"></div>
<div class="cont"></div>
<div class="cont last"></div>

出现有多个元素具有相同的属性时，可以先定义一个类并为它设置相同的样式，最后再在相应的元素调用相应的类（给相应的元素 class 属性添加类）。
一个标签有多个类名时，则同时具有这些类选择器所设置的样式。
类选择器的权重是 0,0,1,0。

id选择器

id 选择器使用" #idName "来定义, id 选择器一般用于选择页面唯一性的元素，经常和 javascript 搭配使用。它的权重是***0,1,0,0***。

<style>
	#pwd {
     
     
		width: 300px;
    }
    /* 为id为"pwd"的表单项设置width样式 */
</style>
<input type="password" id="pwd" />

其他重要的选择器

伪元素选择器

伪元素选择器主要有 :after 和 :before，:after 选择器向指定元素的最后面插入内容（新的元素）；:before 选择器向指定元素的最前面插入内容（新的元素）。可以使用 content 属性来指定要插入的内容。他们的权重是 0,0,0,1（同元素选择器）。伪元素常用来清除浮动或者用来添加不必出现在 html 结构文件中的元素以简化结构。

<style>
	p:after {
     
      
	display:block;
	content:"添加的内容";
	}
	/*在所有的 p 元素的最后面添加一个元素*/
</style>
<body>
	<p>我的名字是 Donald</p>
	<p>我住在 Ducksburg</p>
</body>

伪类选择器

伪类选择器个人理解就是选择某些具有特殊特征的类型元素，这些特征可能和 html 结构有关（结构伪类）或者无关，但他们又确实是 html 中的特定特征的一类元素并不像伪元素那样是通过 css 添加的元素（两者的区别）。他们的权重是 0,0,1,0（同类选择器）。

<a>元素伪类

a:link 用来选择未被访问过的链接。
a:visited 选择已经被访问过的链接。
a:hover 选择鼠标覆盖的链接。
a:active 选择鼠标按下的链接。

<style>
	a{
     
     
		font-size: 40px;
	}
	a:link {
     
     
		color:black;
	}
	a:visited {
     
     
		color:green;
	}
	a:hover{
     
     
		color: yellow;
	}
	a:active {
     
     
		color: blue;
	}
</style>
	<a href="https://www.baidu.com/">百度链接</a><br />
	<a href="https://map.baidu.com/">地图链接</a><br />
	<a href="https://tieba.baidu.com/index.html">贴吧链接</a><br />
	<a href="http://news.baidu.com/">新闻链接</a><br />

需要注意的是这四个伪类的书写顺序：

:link 和 :visited 必须写在 :hover 和 :active前面，否则 :hover 和 :active 的样式将被覆盖（层叠）掉。
:hover 必须写在 :active 的前面，这样方便点这个链接时点击的样式将鼠标覆盖的样式覆盖住，否则你也看不到点击的样式。
平时使用时按照需求按照上面的顺序书写。

其实 :hover 和 :active 不只对 a 元素有效，也可以应用于其他元素。

表单元素伪类
表单伪类 :focus 主要是用于获得焦点的表单元素

<style>
input:focus {
     
     
	background-color:yellow;
}
/*点击文本输入框表单可以看到黄色背景*/
</style>
<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>

结构伪类选择器

结构伪类选择器用于选择具有某些特定特征的一类元素的选择器，他们的这些特征和 html 结构（在 html 中的位置）有关。他们的权重是 0,0,1,0（同类选择器）。

语法	作用
E:first-child	匹配其父元素中的第一个子元素且这个子元素是E元素。
E:last-child	匹配其父元素中的最后一个子元素且这个子元素是E元素。
E:nth-child(n)	匹配其父元素中的第n个子元素且这个子元素是E元素。
E:first-of-type	匹配子元素中的第一个E元素。
E:last-of-type	匹配子元素中的最后一个E元素。
E:nth-of-type(n)	匹配子元素中的第n个E元素。

n的值可以是数字、关键字、表达式

数字：n直接使用数字表示匹配第几个子元素。

关键字：使用even和odd分别表示偶数和奇数。

表达式：2n（偶数）、2n+1（奇数）、5n、n+n₀（第n₀个子元素及后面的子元素）、-n+n₀（前n₀个子元素）。

<style>
	p:nth-child(1) {
     
     
	color: red;
	}
	p:nth-child(4) {
     
     
		color: red;
	}
	p:nth-of-type(2) {
     
     
		color: red;
	}
/*选择器1：匹配第一个子元素且是p元素；选择器2：匹配第四个子元素但不是p元素，所以无效。选择器3：匹配子元素中的第二个p元素，即第三个子元素。*/
	p:nth-child(odd){
     
     
		color: red;
	}
/*选择器1：匹配序号为奇数的子元素且是p元素。若括号内是even关键字则只会匹配到最后一个（第六个）子元素，因为第二个和第四个子元素不是p元素。*/
	p:nth-child(n+3){
     
     
		color: red;
	}
	p:nth-child(-n+2){
     
     
		color: blue;
	}
/*选择器1：匹配第三个及后面为p元素的子元素，第四个不是p元素无效；选择器2：匹配前面两个为p元素的子元素，第二个不是p元素无效。*/
</style>
	<body>
		<p>第1个p元素，第一个子元素</p>
		<div>第1个div元素，第二个子元素</div>
		<p>第2个p元素，第三个子元素</p>
		<div>第2个div元素，第四个子元素</div>
		<p>第3个p元素，第五个子元素</p>
		<p>第4个p元素，第六个子元素</p>
	</body>

代码演示的结果如图
在这里插入图片描述

注意 E:nth-child(n) 和 E:nth-of-type(n) 的区别: E:nth-child(n)是先匹配父元素中的第n个子元素（不分类型进行排序选择），再检查匹配到的元素是否是E类型的子元素，是则有效，不是则无效。E:nth-of-type(n)则是先对父元素内E类型的子元素进行排序，再进行对n匹配。（即前者先匹配 n 再匹配 E ，后者先匹配 E 再匹配 n）
注意括号内是表达式时 n 的值是从0开始的。

属性选择器

属性选择器根据特定的属性和属性值特征来匹配元素。他们的权重是 0,0,1,0。

语法	作用
E[att]	匹配具有 att 属性的E元素。
E[att=“val”]	匹配具有 att 属性且值等于val的E元素。
E[att^=“val”]	匹配att属性值以 val 开头的E元素。
E[att$=“val”]	匹配att属性值以 val 结尾的E元素。
E[att*=“val”]	匹配att属性值中含有 val 的E元素。
E[att~=“val”]	匹配att属性的属性值中具有 val 这个值的E元素。
E[att\|=“val”]	匹配 att 属性的属性值带有以指定值开头的元素，该值必须是整个单词

E[att=“val”]和E[att~=“val”]的差别：当一个属性具有多个属性值时，例如class属性，前者要求属性必须与属性值完全匹配，即所有属性值都要写；后者只要求匹配其中一个。

复合选择器

后代选择器

后代选择器用 “elementName elementName” 来定义，作用是选出指定元素中的后代元素。

<style>
	.topnav a {
     
     
		font:18px/54px "微软雅黑";
}
/*选择.topnav元素中的所有a标签并设置font样式，四个a元素都会被选择，因为他们都是指定元素的后代元素*/
<div class="topnav">
	<a href="#"></a>
	<nav>
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a> 
	</nav>         
</div>
</style>

子代选择器

子代选择器用 “elementName>elementName” 来定义，作用是选出指定元素中的子元素。

<style>
	.topnav>a {
     
     
		font:18px/54px "微软雅黑";
}
/*选择是.topnav元素的子元素的a标签并设置font样式，只有第一个a元素会被选择，因为只有它和nav标签才是指定元素的子元素*/
<div class="topnav">
	<a href="#"></a>
	<nav>
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a> 
	</nav>         
</div>
</style>

并集选择器

并集选择器用 “selector1,selector2” 来定义，作用是同时选出多个元素并指定样式。

<style>
	h2,a{
     
     
		font:18px/54px "微软雅黑";
	}
	/*同时选择 h2 元素和 a 元素并为他们设置相同的样式*/
</style>
<body>
	<article>
		<h1></h1>
		<h2></h2>
		<nav>
			<a href="#"></a>
			<a href="#"></a>
		</nav> 
	</article>
</body>

交集选择器（补充）

交集选择器用 “selector1selector2” 来定义，作用是选出既是selector1元素又是selector2的元素即同时满足两个条件。

<style>
	button.search_btn {
     
     
	width:88px;
	}
	/*选择类名是search_btn同时是button标签的元素*/
</style>
<body>
	<button class="search_btn">搜索</botton>
</body>

交集选择器一般是在元素样式需要提权的时候使用。

兄弟选择器

兄弟选择器用 “elementName+elementName” 来定义，用于选择指定元素之后紧跟着的元素。

<style>
h2+p
{
     
     
	background-color:yellow;
}
/*只会选择兄弟元素中的第一个p元素,如果紧跟在后面的第一个兄弟元素不是p则无效*/
</style>
<body>
<h2>DIV 内部标题</h2>
<p>h2 之后的第一个 P 元素。</p>
<p>h2 之后的第二个 P 元素。</p>
</body>

选择器的权重问题

选择器的权重的值可以表示为四个独立的部分 a,b,c,d 组成。进行复合选择器的权重计算时四个部分是独立的，不会出现进位。在比较大小时按从 a-b-c-d 的顺序依次进行比较，高位相同才需要比较低位。

选择器	权重	权重的等级
！important	无穷大	0
style 属性	1,0,0,0	1
id 选择器	0,1,0,0	2
类、伪类、结构伪类、属性选择器	0,0,1,0	3
标签、伪元素选择器	0,0,0,1	4
通配符选择器	0,0,0,0	5
继承的样式	没有权重	6

权重计算

后代选择器、子选择器、兄弟选择器、交集选择器：所有的基础选择器的权重相加（忽略掉 “>” 和 “+” ），注意没有进位。

#header nav ul li.current a:hover {
    
    color: red; font-weight: bold;}
/*权重0,1,0,0+(0,0,0,1)*3+0,0,1,0+0,0,0,1+0,0,1,0=0,1,2,4
权重id+标签*3+类+标签+伪类*/
#header>div+nav ul li.current a:hover {
    
    color: red; font-weight: bold;}
/*权重0,1,0,0+(0,0,0,1)*4+0,0,1,0+0,0,0,1+0,0,1,0=0,1,2,5
权重id+标签*4+类+标签+伪类*/

并集选择器：相当于多个选择器一起设置样式，权重分开计算即可。
含有伪类、伪元素、属性选择器的复合选择器的权重计算时要注意。
- 伪类：a:hover、p:first-child 的权重是0,0,1,1 不是 0,0,1,0；a:nth-of-type(n):hover权重是 0,0,2,1;即要加上前面那个元素的权重。
- 属性选择器：p[class~=“hello”] 的权重是 0,0,1,1（也是要加上前面那个元素的权重）。
- !important 的用法: li:hover {color: blue !important; font-weight: normal;} 此时该元素的 color 属性样式将无视其他选择器设置的 color 属性样式。

#扬尘/2020/12/18