CSS选择器总结

原创于 2021-11-14 19:38:45 发布 · 449 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端 #选择器

前端专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了CSS选择器的使用，包括通配选择器、元素选择器、类选择器、ID选择器以及属性选择器的各种用法。通过实例展示了如何根据元素的属性值来选中和样式化页面中的元素，帮助理解CSS选择器在网页样式控制中的重要作用。

1 CSS选择器

通配选择器（Universal selector）

作用：选中页面中的所有元素
语法：*
例子：*{}

*{
    color: red;
}

2 元素选择器（Type selector）

也叫类型选择器、标签选择器

作用：根据标签名来选中指定的元素
语法：elementname{}
例子：p{} h1{} div{}

p{
    color: red; 
}

h1{
    color: green;
}

类选择器（Class selector）

作用：根据元素的class属性值选中一组元素
语法：.classname
例子：.blue{}

.blue{
    color: blue;
}
.size{
    font-size: 20px;
}

ID选择器（ID selector）

作用：根据元素的id属性值选中一个元素
语法：#idname{}
例子：#box{} #red{}

#red{
    color: red;
}

属性选择器（Attribute selector）
作用：根据元素的属性值选中一组元素
语法1：[属性名] 选择含有指定属性的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>存在和值属性选择器</title>
		<style type="text/css">
			/*
			 [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
			*/
			[name]{
				background: pink;
			}
		</style>
	</head>
	<body>
		<div name="atguigu_lb">李白</div>
	
		<div name="atguigu_zf">张飞</div>
		
		<div name="atguigu_bjy">白居易</div>
		
		<div name="atguigu_df">杜甫</div>
		
<div>刘备</div>

		<div>关羽</div>
		
		<div>李贺</div>
	</body>
</html>

语法2：[属性名=属性值] 选择含有指定属性和属性值的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>存在和值属性选择器</title>
		<style type="text/css">
			/*
			 [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
			*/
			[name="atguigu_llc"]{
				background: pink;
			}
		</style>
	</head>
	<body>
		<div name="atguigu_lb">李白</div>
	
		<div name="atguigu_zf">张飞</div>
		
		<div name="atguigu_bjy">白居易</div>
		
		<div name="atguigu_df">杜甫</div>
		
<div>刘备</div>

		<div>关羽</div>
		
		<div>李贺</div>
	</body>
</html>

语法3：[属性名^=属性值] 选择属性值以指定值开头的元素
语法4：[属性名$=属性值] 选择属性值以指定值结尾的元素
语法5：[属性名*=属性值] 选择属性值中含有某值的元素

语法6：[attr|=val] : 选择attr属性的值以val（包括val）或val-开头的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>存在和值属性选择器</title>
		<style type="text/css">
			/*
			 [attr|=val] : 选择attr属性的值以val（包括val）或val-开头的元素
			 [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
			 [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
			 [attr*=val] : 选择attr属性的值中包含字符串val的元素。
			*/
			[name$="atguigu"]{
				background: pink;
			}
		</style>
	</head>
	<body>
		<div name="atguigu_lb">李白</div>
	
		<div name="atguigu_zf">张飞</div>
		
		<div name="atguigu_bjy">白居易</div>
		
		<div name="atguigu_df">杜甫</div>
		
<div>刘备</div>

		<div>关羽</div>
		
		<div>李贺</div>
	</body>
</html>