CSS之选择器_css选择器得到有几个div-CSDN博客

本文链接：https://blog.csdn.net/mmake1994/article/details/80777615

一：基本选择器

选择器	类型	功能描述
*	通配选择器	选择文档中所以HTML元素
E	元素选择器	选择指定类型的HTML元素
#id	ID选择器	选择指定ID属性值为“id”的任意类型元素
.class	类选择器	选择指定class属性值为“class”的任意类型的任意多个元素
selector1,selectorN	群组选择器	将每一个选择器匹配的元素集合并

1.元素选择器（选中所有DIV标签）

	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
		<!--所有div元素都被选中-->
		<style>
			div {
				font-size: 20px;
				color: red;
			}
		</style>
		
	</head>

	<body>
		<div>
			天若有情天亦老，看见哈特蒙一脚！01
		</div>
		<div>
			天若有情天亦老，看见哈特蒙一脚！02
		</div>
		<div>
			天若有情天亦老，看见哈特蒙一脚！03
		</div>
		<div>
			天若有情天亦老，看见哈特蒙一脚！04
		</div>
	</body>

2.类选择器（选中所有相同类名的DIV标签）

	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<!--只需要部分div元素被选中-->
		<style>
			.div2{
				font-size: 20px;
				color: pink;
			}
		</style>
	</head>
	<body>
		<div>
			天若有情天亦老，看见哈特蒙一脚！01
		</div>
		<div>
			天若有情天亦老，看见哈特蒙一脚！02
		</div>
		<div class="div2">
			天若有情天亦老，看见哈特蒙一脚！03
		</div>
		<div class="div2">
			天若有情天亦老，看见哈特蒙一脚！04
		</div>
	</body>

3.ID选择器（选中某个ID名的DIV标签）

	<head>
		<meta charset="UTF-8">
		<title>ID选择</title>
		<!--对单个div元素进行选中-->
		<style>
			#div4{
				font-size: 20px;
				color: deeppink;
			}
		</style>
	</head>
	<body>
		<div>
			天若有情天亦老，看见哈特蒙一脚！01
		</div>
		<div>
			天若有情天亦老，看见哈特蒙一脚！02
		</div>
		<div>
			天若有情天亦老，看见哈特蒙一脚！03
		</div>
		<div id="div4">
			天若有情天亦老，看见哈特蒙一脚！04
		</div>
	</body>

二：层级选择器

选择器	类型	功能描述
E F	后代选择器（包含选择器）	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E~F	通用选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<style>
			div p{
				font-size: 20px;
				color: brown;
			}
		</style>
	</head>

	<body>
		<div>
			天若有情天亦老，看见哈特蒙一脚！01
		</div>
		<div>
			天若有情天亦老，看见哈特蒙一脚！02
		</div>
		<div>
			<p>
				天若有情天亦老，看见哈特蒙一脚！03
			</p>
		</div>
		<div>
			天若有情天亦老，看见哈特蒙一脚！04
		</div>
	</body>

三：属性选择器

选择器	功能描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>
		<style>
			input[type=text]{
				background-color: red;
			}
			input[type=password]{
				background-color:deeppink ;
			}
		</style>
	</head>
	<body>
		用户名:<input type="text" name="username" /><br />
		密码:<input type="password" name="password" />
	</body>