1、id选择器
#box{ }
<style>
#box{ ................. }
<style>
<body>
<div id="box"></div>
<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.同级样式,默认按照定义样式的顺序,后者覆盖前者