CSS - 普通选择器

最新推荐文章于 2025-07-01 09:31:29 发布

原创最新推荐文章于 2025-07-01 09:31:29 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

16 篇文章

订阅专栏

一、基础选择器

1、通配选择器

匹配文档中所有标签：通常指html、body及body中所有显示类的标签
* {
    border: solid;
}
2、标签选择器

匹配文档中所有与标签名匹配的标签：
如：div{}会匹配文档中全部div，span{}会匹配文档中所有span
div {
    background-color: yellow;
}
3、类选择器
匹配文档中所有拥有class属性且属性值为red的标签：
  如：<sup class="red"></sup>、 <sub class="red"></sub>均会被匹配
.red {
    color: red;
}
4、id选择器
匹配文档中所有拥有id属性且属性值为div的标签：
  如：<div id="div"></div>、 <section id="div"></section>均会被匹配
#div {
    text-align: center;
}

二、基础选择器优先级

基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高

基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高

基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器

注意：id选择器必须保证单文档的唯一性

三、组合选择器

1、群组选择器
div, span, .red, #div {
    color: red;
}
一次性控制多个选择器

选择器之间以,隔开，每一个选择器位均可以为任意合法选择器或选择器组合

2、子代(后代)选择器
/*子代选择器用>连接*/
body > div {
    color: red;
}

/* 后代选择器用空格连接*/
.sup .sub {
    color: red;
}

/*
结构如下：
    div_1
        div_2
            div_3

1>2,2>3 属于子代关系   
1 3 属于后代关系，3是1的后代
*/
一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器

每一个选择器位均可以为任意合法选择器或选择器组合

子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系

3、相邻(兄弟)选择器
/*相邻选择器用+连接*/
.d1 + .d2 {
    color: red;
}

/*兄弟选择器用~连接*/
.d1 ~ .d3 {
    color: red;
}

/*
结构如下：
    <div>
        <p1></p>
        <p2></p>
        <p3></p>
    </div>

p1和p2为相邻，p1和p3同级为兄弟
*/
一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器

每一个选择器位均可以为任意合法选择器或选择器组合

相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系

4、交集选择器
/*满足类为d，id为dd的div <div class="d" id="dd"></div>*/
div.d#dd {
    color: red;
}

/*满足class为d1 d2 d3的所有选择器 <div class="d1 d2 d3"></div>*/
.d1.d2.d3 {
    color: red;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>组合选择器</title>
	<style type="text/css">
        /*交集选择器*/
	/*即是选择器1又是选择器2*/
	i.s.s2 {
	    color: yellow;
	}
		
        /*多类名选择器*/
	.d1 {
	     color: blue;
	}
	.d1.d2 {
	    color: tan;
	}
	.d1.d2.d3 {
	    color: red;
	}
	</style>
</head>
<body>
	
	<div>div</div>
	<span class="s">span</span>
	<section>section</section>
	<div>
	    <a href="">a标签</a>
            <section>section2222</section>
	</div>
	<i class="s s2">iiii</i>
	<div class="d1 d2 d3">呵呵</div>
</body>
</html>

四、组合选择器优先级

- 同目录结构下

子代与后代的优先级相同 body>div == body div
相邻与兄弟的优先级相同 div+span == div~span

- 不同目录结构下

根据权值大小进行比较，即标签权重和
权值比较，只关心大小，而不关心位置与具体选择器
固定不变的大小：id>class>标签（只有控制同一目标，才具有可比性）
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>组合选择器优先级</title>
	<style type="text/css">
		/*权值：10*/
		div {
			color: red;
		}
		/*权值：20*/
		div div {
			color: yellow;
		}
		/*大于一切标签*/
		.d2 {
			color: blue;
		}
		/*与上比较，.d2抵消,剩权重10*/
		div .d2 {
			color: orange;
		}
		/*等价于div .d2,权值相同,上下文位置决定覆盖与否*/
		.d1 div {
			color: pink;
		}
		/*与上相比，多10*/
		div .d1 div {
			color: tan;
		}
		/*针对不同目标，不具有可比性*/
		div .d1 > div{
			color: green;
		}
		/*id高于一切class及标签*/
		#dd1 div {
			color: #000;
		}
	</style>
</head>
<body>
	
	<div>
		<div class="d1">
			<div id="dd1">
				<div>
					<div class="d2">12345</div>
				</div>
			</div>
			
		</div>
	</div>
</body>
</html>
组合选择器优先级与权值相关，权值为权重和

权重对应关系

选择器权重
通配 1
标签 10
类、属性 100
id 1000
!important 10000

选择器权值比较，只关心权重和，不更新选择器位置

不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合

选择器	权重
通配	1
标签	10
类、属性	100
id	1000
!important	10000

五、属性选择器

[attr]：匹配拥有attr属性的标签

[attr=val]：匹配拥有attr属性，属性值为val的标签

[attr^=val]：匹配拥有attr属性，属性值以val开头的标签

[attr$=val]：匹配拥有attr属性，属性值以val结尾的标签

[attr*=val]：匹配拥有attr属性，属性值包含val的标签
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style>
		.d2 {
			color: red;
		}
		/*属性选择器权重 == class选择器权重*/
		/*有属性class的所有标签*/
		[class] {
			color: orange;
		}

		/*有属性class且值为d2的所有标签(值不影响权重)*/
		[class="d2"] {
			color: pink;
		}
		
		/*是div且class='d2',增加了权重*/
		div[class='d2'] {
			color: blue;
		}
		
		/*属性以什么开头: ^= */
		/*属性以什么结尾: $= */
		/*属性模糊匹配: *= */
		[class ^= 'he'] {
			color: yellow;
		}
		[class $= 'ld'] {
			color: tan;
		}
		[class *= 'ow'] {
			color: cyan;
		}
		[class][dd] {
			color: brown;
		}

	</style>
</head>
<body>
	
	<div class="d1">00000
		<div class="d2">12345</div>
		
		<div class="helloworld" dd do="do something">helloworld</div>
	</div>
</body>
</html>
注意：

属性选择器权重等价于类选择器
掌握所有选择器，并熟知选择器优先级