11选择器（id选择器，类选择器，标签选择器）_11个类选择器和1个id选择器-CSDN博客

本文链接：https://blog.csdn.net/u011975349/article/details/52437491

1、id选择器

#box{ }

<style>

#box{ ................. }

<style>

<body>

<body>

特点：每一个标签只能有一个ID。

2、类选择器

.类名{ }

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title></title>
		<style>
			.box{width: 100px;height: 100px;background: blue}
			.box2{border:5px solid red;}
		</style>
	</head>
	<body>
			<div>
				<p>p1</p>
			</div>
			<div>
				<p>p2</p>
			</div>
			<div>
				<span>
					<p>p3</p>
				</span>
			</div>
			<div class="box">块</div>
			<div class="box box2">块</div>
			<div class="box">块</div>
			<p>p1</p>
			<p>p2</p>
			<p>p3</p>
	</body>
</html>

特点：一个标签可以有多个类选择器修饰，类之间空格隔开

3、标签选择器

标签{ }

定义标签选择器后，该页面的这个标签全部被这个类修饰，而且可以定义标签之间的包含关系

如 div span p{width: 100px;height: 100px;background: blue} 表示为div——span——p

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title></title>
		<style>
			div span p{width: 100px;height: 100px;background: blue}
			.box2{border:5px solid red;}
		</style>
	</head>
	<body>
			<div>
				<p>p1</p>
			</div>
			<div>
				<p>p2</p>
			</div>
			<div>
				<span>
					<p>p3</p>
				</span>
			</div>
			<div class="box">块</div>
			<div class="box box2">块</div>
			<div class="box">块</div>
			<p>p1</p>
			<p>p2</p>
			<p>p3</p>
	</body>
</html>

优先级：1.标签选择器< 类型选择器 < id选择器 < style行间样式 < js样式

2.同级样式，默认按照定义样式的顺序，后者覆盖前者