【CSS】选择器

柠N檬

已于 2022-06-14 21:51:29 修改

阅读量303

点赞数 3

文章标签： css html 前端

于 2022-06-14 21:42:34 首次发布

本文链接：https://blog.csdn.net/ck_kc/article/details/125264535

版权

基本选择器：

1、标签选择器,选出所有同名标签

2、类选择器,选出所用同类名的标签,每一个标签可以有多个class，中间空格隔开

3、id选择器,选出唯一标签，id值不可重复

<style>
1，标签选择器,选出所有同名标签
div{
	background-color: antiquewhite;
}
p{
	background-color: lightcoral;
}
2、类选择器,选出所用同类名的标签,每一个标签可以有多个class，中间空格隔开
.ft{
    color: red;
}
.active{
	font-weight: 800;
}
3、id选择器,选出唯一标签，id值不可重复 
#first{
	font-size:20px
}
</style>		
<booy>	
<div class="ft" id="first">数据1</div>
<div class="ft active">数据2</div>
<div class="active">数据3</div>
<p>数4</p>
</booy>

高级选择器：

1、通配符选择器，*会选出所有标签

2、并集选择器逗号,第一次找某1个标签时，以class为主

3、后代选择器空格,符合条件的子子孙孙都能选出

4、子代选择器 >,选出符合条件的直系子代元素

<style>
1、通配符选择器，*会选出所有标签 */
* {
	color: red;
}
2、并集选择器 逗号,第一次找某1个标签时，以class为主
.active {
	background-color: lightblue;
}
.active,p {
	font-size: 20px;
}
3、后代选择器 空格,符合条件的子子孙孙都能选出
选出div下的所有后代a
.ft a{
	background-color: aqua;
}
4、子代选择器 >,选出符合条件的直系子代元素
.ft>a{
	background-color: lightcoral;
}	
</style>
<body>
		<div>数据1</div>
		<div>数据2</div>
		<div class="active">数据3</div>
		<p class="active">数据4</p>
		<div class="ft">
			<a href="#">数据5</a>
			<ul>
				<li><a href="#">数据6</a></li>
				<li>数据7</li>
			</ul>
		</div>
	</body>