1.标记选择器：
只写标签名，后面不加“<>”;
标签名做选择器会把页面中所有的这个标签都选中；
2.id选择器
每个页面标签都可以增加id属性，
标签的id值必须遵从以下规范;(1)只能由字母、下划线、数字组成
（2）必须是字母开头
（3）不能与标签名同名
（4）尽量使用有意义的单词 如：nav;
注意：（1）任何一个页面不能使用同名id,我们通过实验发现，浏览器会把同名的id都是用相同的元素修饰，但我们不能这样做，id具有唯一性。
（2）页面上的任何一个元素，都可以同时被多个选择器同时选中，并且多个选择器同时作用与这一个标签，及多个选择器选中同一个标签，他们的样式可以叠加起来。这是CSS层叠的原因
（3）如果多个选择器选中同一个元素，他们之间的样式有冲突，就存在选择器的优先级问题
顺序：在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式、作为style属性写在元样式、id选择器、类选择器、标签选择器、通配符选择器、浏览器自定义或继承。
3.类选择器
（1）类选择器前面有一个点（.）;
（2）任何标签都可以有class属性；
（3）class属性的命名规范与id属性一样
（4）一个class属性名可以和id属性名相同但是最后不要一样
（5）不同的标签可以有同一个class属性。一个标签亦可以从属多个class属性，但是表示时中间用空格隔开；不允许在标签中有两个class，
（6）尽量使用原子化的类，少用大而全的类。
（7）尽量使用class，尽量不用id做选择器，（class上样式，id上行为），id一般用在js中，getElementbyId()。
4.后代选择器
后代选择器不是儿子选择器，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div ul p{
color: red;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<p>后代选择器</p>
</li>
</ul>
</div>
<div>
<div>
<ul>
<li>
<p>后代选择器</p>
</li>
</ul>
</div>
</div>
</body>
</html>
显示两个红色的：后代选择器
5.交集选择器
语法：标记名.类名.类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h2.biaoti2{
color: red;
}
</style>
</head>
<body>
<h2>标题1</h2>
<h2 class="biaoti2">标题2</h2>
</body>
</html>
6.并集选择器（组选择器）
多个选择器之间用逗号隔开，被选中的元素采用相同样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h2,p{
color: red;
}
</style>
</head>
<body>
<h2>标题1</h2>
<p>语句2</p>
</body>
</html>
7.通配符（*）选择器：
*选择页面中的所有元素，这样做不好，一般不用。
8.CSS的继承性
（1）只能把自己的样式继承给后代节点，但是不影响自己的父节点和兄弟节点
（2）以下属性能被继承：
color, text-, font- , line-.
不能继承的属性：
有关盒子模型的属性，定位的属性，背景属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<div>盒子中的文字
<p>段落文字</p>
</div>
</body>
</html>
此时都会显示相同的效果，p标签继承了div标签的效果，如果把css样式表中的div换成p，p{ color:red; font-size:50px;}，此时只有p中的文字才有该效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
color: red;
border: solid red 2px;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<p>标题中的文字</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
如果把style中的div换成p，此时两者效果中边框不同，即每一个div标签都会调用标签选择器中的效果。
