一.引入
上一篇博客HTML中table表总结中我在结尾提到了CSS的使用，本篇就详细总结一下CSS中的样式选择器。
CSS 指层叠样式表(Cascading Style Sheets)，用于设定网页中元素的显示方式。HTML中的样式表大概分为三类：
1.外部样式表
将CSS样式写在css样式文件中，使用link标签将该css文件引入到HTML文档中。目的是为了让多个多个HTML文件需要的样式出现重复时，简化代码。
2.内部样式表
将CSS样式直接写在HTML文档中的head内的style标签内。目的是在同一个HTML文档中出现多个重复样式时简化代码。
3.内联样式
将CSS样式写在HTML文档某个标签的style标签属性的属性值中。当某个标签需的样式需要特别标注时，使用该格式。
二.内部样式表的几种选择器
（1）标签选择器
顾名思义，一标签名为关键字，筛选出标签，并辅以样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--选择器 ：浏览器选择匹配的元素施加相应的样式-->
<style type="text/css">
/*标签选择器：标签名*/
span{/*优先级最低*/
color:red;/*将span标签中的字体颜色均设置为红色*/
}
</style>
</head>
<body>
<span>haut</span>
<span id="black_txt" class="blue_txt">haut</span>
<span>haut</span>
<i class="blue_txt">百度一下</i>
<b class="blue_txt">腾讯</b>
<del class="green_txt">删除</del>
<p>自挂东南枝</p>
</body>
</html>
运行结果：
如图，span标签的显示结果均为红色。
（2）id选择器
以标签内的标签id的属性值为关键词，筛选对应标签，并赋予相应样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--选择器 ：浏览器选择匹配的元素施加相应的样式-->
<style type="text/css">
/*标签选择器：标签名*/
span{/*优先级最低*/
color:red;
}
/*id选择器：#id标签属性值 id值不允许重复*/
#black_txt{/*优先级最高*/
color: black;
}
</style>
</head>
<body>
<span>haut</span>
<span id="black_txt" class="blue_txt">haut</span>
<span>haut</span>
<i class="blue_txt">百度一下</i>
<b class="blue_txt">腾讯</b>
<del class="green_txt">删除</del>
<p>自挂东南枝</p>
</body>
</html>
运行结果：
如图，标签id值为black_txt的标签显示结果为黑色
（3）class选择器
以标签属性中的class属性的属性值为关键字，筛选标签，并赋予相应属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--选择器 ：浏览器选择匹配的元素施加相应的样式-->
<style type="text/css">
/*标签选择器：标签名*/
span{/*优先级最低*/
color:red;
}
/*id选择器：#id标签属性值 id值不允许重复*/
#black_txt{/*优先级最高*/
color: black;
}
/*class选择器：.class class属性可以重复*/
.blue_txt{/*优先级次之*/
color: blue;
}
</style>
</head>
<body>
<span>haut</span>
<span id="black_txt" class="blue_txt">haut</span>
<span>haut</span>
<i class="blue_txt">百度一下</i>
<b class="blue_txt">腾讯</b>
<del class="green_txt">删除</del>
<p>自挂东南枝</p>
</body>
</html>
运行结果：
（4）分组选择器
分组选择器可以一次用多个关键字筛选标签并赋予相应属性。
格式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--选择器 ：浏览器选择匹配的元素施加相应的样式-->
<style type="text/css">
/*标签选择器：标签名*/
span{/*优先级最低*/
color:red;
}
/*id选择器：#id标签属性值 id值不允许重复*/
#black_txt{/*优先级最高*/
color: black;
}
/*class选择器：.class class属性可以重复*/
.blue_txt{/*优先级次之*/
color: blue;
}
/*分组选择器*/
.green_txt,p{
color: green;
}
</style>
</head>
<body>
<span>haut</span>
<span id="black_txt" class="blue_txt">haut</span>
<span>haut</span>
<i class="blue_txt">百度一下</i>
<b class="blue_txt">腾讯</b>
<del class="green_txt">删除</del>
<p>自挂东南枝</p>
</body>
</html>
运行结果：
（5）通配符选择器
用于对整个页面的所有标签赋予样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--选择器 ：浏览器选择匹配的元素施加相应的样式-->
<style type="text/css">
/*标签选择器：标签名*/
span{/*优先级最低*/
color:red;
}
/*id选择器：#id标签属性值 id值不允许重复*/
#black_txt{/*优先级最高*/
color: black;
}
/*class选择器：.class class属性可以重复*/
.blue_txt{/*优先级次之*/
color: blue;
}
/*分组选择器*/
.green_txt,p{
color: green;
}
*{/*通配符选择器：匹配当前页面所有标签*/
margin: 0px;/*用于取消整个页面中字体与边框的间距*/
padding: 0px;
}
</style>
</head>
<body>
<span>haut</span>
<span id="black_txt" class="blue_txt">haut</span>
<span>haut</span>
<i class="blue_txt">百度一下</i>
<b class="blue_txt">腾讯</b>
<del class="green_txt">删除</del>
<p>自挂东南枝</p>
</body>
</html>
运行结果：
（6）后代选择器
后代选择器是一种选择器的格式，无具体使用价值，这里仅提供格式参考，不再赘述
/*后代选择器*/
html body .blue_txt{
}三.选择器优先级
选择器赋予的样式也具有优先级，由我上述的例子也可以看出来。
id选择器>class选择器>标签选择器
