上文介绍了如何在网页中使用css及css的常用知识点，今天首先介绍css 的选择器，所谓选择器就是通过一定的规则语法查找html元素节点，只有找到这些元素才能应用样式。
选择器类型
css 选择器从不精确到最精确，可分以下几种：
- 通用选择器 （*）-—— 选择所有元素
- 标签选择器（tag）—— 按 HTML 标记名称定位元素（包括伪元素）
tag 是html 标签关键字，一般小写。
- 类选择器（.class）—— 分别按类定位元素（包括伪类）
在html标签上使用 class="" 属性应用css 样式，可以写多个class，空格隔开，如：<p class="cls1 cls2">。
- 属性选择器([attr]) —— 分别按标签属性定位元素（包括伪类）
属性值html标签上的各种属性，如 [alt], [type="text"], [lang="en"]。
- ID 选择器 —— 按 id 定位元素
id 必需是唯一的，不能重复。
语法如下：
* {
/* 通用选择器*/
}
tag {
/* 标签选择器 */
}
tag::before {
/* 标签选择器和伪元素 */
}
.class {
/* 类选择器 */
}
.class:hover {
/* 类选择器和伪类 */
}
[attr] {
/* 属性选择器 */
}
#id {
/* ID 选择器 */
}伪元素有两个冒号 ( ::, 比如 ::before)，伪类有一个冒号 ( :, 比如 :hover)。
后面学习JavaScript 时，会学习到通过js也可以查找html元素，查找规则就是通过css 选择器查找，如下示例：
此查询用于获取与选择器匹配的所有元素：
document.querySelectorAll('article h2')如上代码获取到一个html 节点集合，每个html节点都有子节点，孙子节点，依次类推.....
html 节点树
在网页中 html 是一个树状的结构，每个html 元素是一个节点，且每个节点下面又有子节点。
如下图：
css 选择器就是在这样的一个树结构里面查找html元素节点，找到后浏览器渲染对应的样式。
组合使用选择器
选择器除了可以单个使用，也可以组合使用，比如 #id p, #id >.class,p+h3等，按功能可分以下几种：
- 包含选择器 —— 通过空格符隔开，比如：p span，指p标签下的所有span 标签，包括子级的子级里面的span。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
div span{
color:red;
}
</style>
</head>
<body>
<div>黑色<span>红色</span></div>
<div>
<p>黑色<span>红色</span><span>红色</span></p>
</div>
<span>不是红色</span>
<span>不是红色</span>
</body>
</html>显示效果：
- 子选择器 —— 通过">" 隔开，比如： p>span, 指p元素下子级span，子级的子级下的span 就找不到了。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
div > span{
color:red;
}
</style>
</head>
<body>
<div>黑色<span>红色</span></div>
<div>
黑色<span>红色</span><span>红色</span>
<p><span>不是红色</span></p>
</div>
<span>不是红色</span>
<span>不是红色</span>
</body>
</html>显示效果：
- 相邻选择器 —— 通过“+”隔开，比如： p+span，指和p元素同级且紧跟在p元素节点后面的span节点。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
p + span{
color:red;
}
</style>
</head>
<body>
<p>黑色</p>
<span>红色</span>
<span>不是红色</span>
<span>不是红色</span>
</body>
</html>显示效果：
这里一定注意span必须紧跟在p标签后面，它们2个之间有任何标签都不会起作用了。
- 兄弟选择器 —— 通过“~”隔开，比如：p~span，指和p同级且在其后面的所有span节点。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
p~span{
color: red;
}
</style>
</head>
<body>
<p>黑色</p>
<span>红色</span><br>
<span>红色</span><br>
<h1>标题</h1>
<span>红色</span>
</body>
</html>显示效果：
- 分组选择器 —— 通过“，”隔开，比如：h1,h2,h3,指这些元素共用相同的样式。
如下示例：
h1,h2,h3{
background-color: red;
}整个页面中的h1、h2、h3的背景色都是红色，无论在哪个层次的节点中都会起作用。
选择器优先级
不同的选择器如果作用于同一个html元素，浏览器会根据优先级规则渲染样式。
优先级高的选择器会覆盖优先级低的样式，如下表从上到下优先级依次变高：
选择器 | 例子 | 级别 |
标签选择器 | h1 | 1 |
类，属性选择器 | .class, [type="text"] | 2 |
ID选择器 | #contact | 3 |
内联样式 | <div style="background: purple"> | 4 |
!important关键词 | div { color: green !important } | 覆盖所有 |
请谨慎地使用!important，它变得非常难以维护。!important 仅在绝对必要时才应使用，例如为某些您无法控制的第三方设置样式，使用内联样式，以及在少数情况下使用 JavaScript 切换显示。
总结
css 选择器是一种查询html元素节点的语言，当css选择器互相组合时，会变得很复杂，所以平时尽量减少使用组合选择器。
关于优先级，总而言之，从标签选择器到!important的每层级别都比前一个级别强一个数量级。
学习css，切记死记硬背，理解它很重要，结合之前学习的html 知识多练习，感谢关注。