web前端选择器

Go for ittttt！

已于 2022-11-19 17:42:49 修改

阅读量208

点赞数

文章标签：前端 css css3

于 2022-11-19 17:42:06 首次发布

本文链接：https://blog.csdn.net/m0_46124024/article/details/127938559

版权

css常用选择器

ID选择器
类选择器
后代元素选择器
- 子元素选择器
- 选择器知识练习与巩固

ID选择器

通过id属性选择唯一的一个元素
语法：**#id属性值{}；**
这首诗一共有四句，每一句都在p标签内
如果只想让第二句颜色设置为蓝色怎么办？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<!-- 这首诗一共有四句，每一句都在p标签内
		如果只想让第二句颜色设置为蓝色怎么办？ -->
		<style type="text/css">
		#p1{
			color: blue;
		}
		</style>
	</head>
	<body>
		<h1>悯农</h1>
		<p>锄禾日当午，</p></br>
		<p id="p1">汗滴禾下土。</p></br>
		<p>谁知盘中餐，</p></br>
		<p>粒粒皆辛苦。</p></br>
	</body>
</html>

类选择器

     类选择器class
	 **语法：.类属性值{}；**
	 如果想要另外三句都为黄色呢？再设置三个id吗？
     那样太麻烦了。
	 可以选择class分类器，class属性和id属性相似
	 id不可重复，class可以重复
	 拥有相同class属性值的元素，属于一组
	 选中一组元素，进行设置；
	 可以为一个元素设定多个class属性值，用空格隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style type="text/css">
		#p1{
			color: blue;
		}
		.p2{
			color: yellow;
			}
		.p3{
			font-size: 40px;
		}
		</style>
	</head>
	<body>
		<h1>悯农</h1>
		<p class="p2">锄禾日当午，</p></br>
		<p id="p1">汗滴禾下土。</p></br>
		<p class="p2">谁知盘中餐，</p></br>
		<p class="p2 p3" >粒粒皆辛苦。</p></br>
		
	</body>
</html>

统配选择器

选中页面中所有的元素
 **语法： *{}** 
将页面背景设置为红色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style type="text/css">
/* 		#p1{
			color: blue;
		}
		.p2{
			color: yellow;
			}
		.p3{
			font-size: 40px;
		} */
		*{
			background-color: red;
		}
		</style>
	</head>
	<body>
		<h1>悯农</h1>
		<p class="p2">锄禾日当午，</p></br>
		<p id="p1">汗滴禾下土。</p></br>
		<p class="p2">谁知盘中餐，</p></br>
		<p class="p2 p3" >粒粒皆辛苦。</p></br>
		
	</body>
</html>

同时选中多个选择器

语法：选择器1，选择器2，......{};
用逗号隔开，满足选择器1，2....都被选中；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style type="text/css">
/* 		#p1{
			color: blue;
		}
		.p2{
			color: yellow;
			}
		.p3{
			font-size: 40px;
		} */
	/* 	*{
			background-color: red;
		} */
		#p1,.p3,h1{
			background-color: yellow;
		} 
		</style>
	</head>
	<body>
		<h1>悯农</h1>
		<p class="p2">锄禾日当午，</p></br>
		<p id="p1">汗滴禾下土。</p></br>
		<p class="p2">谁知盘中餐，</p></br>
		<p class="p2 p3" >粒粒皆辛苦。</p></br>
	
	</body>
</html>

复合选择器

语法：选择器1选择器2 {}；
中间没有空格隔开
选中同时满足多个选择器的元素；
如图，想让最后一句背景设置为绿色，该如何设置？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style type="text/css">

/* 		.p3{
			background-color: green;
		} */
		/* 如果这样设置，粒粒皆辛苦那一句也会变化，这里就要用到复合选择器 */
		span.p3{
			background-color: green;
		}
		</style>
	</head>
	<body>
		<h1>悯农</h1>
		<p class="p2">锄禾日当午，</p></br>
		<p id="p1">汗滴禾下土。</p></br>
		<p class="p2">谁知盘中餐，</p></br>
		<p class="p2 p3" >粒粒皆辛苦。</p></br>
		<span class="p3">这是一首歌颂劳动人民的诗</span>
	</body>
</html>

后代元素选择器

首先需要有父元素子元素的概念；
子元素，直接被父元素包含的元素，
父元素，直接包含子元素的元素
后代元素（直接或者间接被祖先元素包含的元素，子元素也是后代元素），
祖先元素（直接或者间接包含后代元素的元素，父元素也是祖先元素），
兄弟元素，具有同一个父元素的元素。
选中指定元素的指定后代元素：
**语法：
		 祖先元素 后代元素{}**
		 中间用空格隔开
选中id为1中的p元素中的span元素；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子元素和后代元素</title>
		<style type="text/css">
			 /* 选中id为1中的p元素中的span元素 */
			#p1 p span{
			background-color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<span>A</span>
			<p>B<span>C</span></p>
		</div>
		<div id="p1">
			<span>D</span><p>E<span>F</span></p>
		</div>
		<span>G</span>
	</body>
</html>

子元素选择器

语法：父元素>子元素{};
为div的子元素span设置一个背景颜色为黄色;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子元素和后代元素</title>
		<style type="text/css">
		/* 为div的子元素span设置一个背景颜色为黄色; */
		div>span{
			background-color: yellow;
		}
		</style>
	</head>
	<body>
		<div>
			<span>A</span>
			<p>B<span>C</span></p>
		</div>
		<div id="p1">
			<span>D</span> <p>E<span>F</span></p>
		</div>
		<span>G</span>
	</body>
</html>

只有A和D是子元素，CF是后代元素，G是兄弟元素。
在这里插入图片描述

选择器知识练习与巩固

 以下链接是有关选择器的小游戏，可以拿来练习巩固知识。

css diner