css选择器可分为几个大类：
- 基础选择器
- 伪类选择器
- 属性选择器
- 伪元素选择器
- 多元素组合选择器
一、基础选择器
基础选择器包含以下几种：
-
*通用元素选择器，匹配页面任何元素 -
#idid选择器，匹配指定的id属性的元素 -
.class类选择器，匹配所有class指定的某一类元素 -
element标签选择器，匹配指定的标签元素
1. 通用元素选择器
*是一个通配符，所以它能匹配所有页面内的元素，我们一般可以用它来清除浏览器页面自带的css效果，例如：
*{ margin:0;padding:0; }
页面将清除自带的补丁空白。
值得注意的是，如果要清除不同标签各自特有的默认样式，需要分别写出，不能一次性写在通配符选择器中。
2. 类选择器
通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。 页面文档中的多个元素可以拥有同一个类名。
在写样式表时，类选择器是以英文句号.开头的。
例如,在div标签规定class：
<div class="demo" id="nav">demo div1</div>
在css样式表内，规定class为demo的元素字体大小为40px：
.demo{ font-size: 40px; }
更多小细节
一般在页面当中，我们推荐少用id，类名就是专门用来给CSS设置样式的；在HTML中每个标签可以同时绑定多个类名，例如：
<div class="类名1 类名2 ...">
2. id选择器
通过设置元素的id属性为该元素制定id。id名由开发者指定。每个id在文档中必须是唯一的。
而在写样式表时，id选择器是以 # 开头的。
例如,在div标签规定id名和class：
<div class="demo" id="nav">demo div1</div>
在css样式表内，规定id为nav的元素字体加粗：
#nav{ font-weight: bolder; }
更多小细节
id 属性值 nav 必须在文档中是唯一的；但文档中的其他标签可以有相同的 class 属性值 demo 。
如果多个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。
内联样式大于id选择器，id选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。例如：
- 当类选择器和标签选择器同时指定字体颜色时
<div class="demo" id="nav">demo div1</div>
#nav{ color:red; }
.demo{ color:yellow; }
最终字体颜色为红色。
- 当类选择器和标签选择器同时指定字体颜色时
<div class="demo" id="nav">demo div1</div>
div{ color:red; }
.demo{ color:blue; }
最终拥有类选择器的元素字体颜色为蓝色。
3. 标签选择器
根据指定的标签名称，在当前页面文档中找到该标签，然后设置css样式，这就是标签选择器。
要注意的是，标签选择器选中的是当前页面内所有的相同标签，而不能单独选中其中一个标签。
例如，页面内有多个div标签：
<div class="content">
<div class="demo" id="nav">demo div1</div>
<div>demo div2</div>
<p>demo p1</p>
</div>
<p>demo p2</p>
在css样式表内，规定div元素字体为红色：
div{ color:red; }
所有标签为div，以及在div标签内的p元素字体都变为了红色，div外的p标签没有变色。
二、伪类选择器
css中伪类是加在选择器后面，用来指定元素状态的关键字。比如，:hover 会在鼠标悬停在选中元素上时应用相应的样式。
伪类选择器的标志性符号是 : 。
css中有一些常用伪类选择器：
-
:link超链接点击之前 -
:visited链接被访问过之后 -
:hover“悬停”，鼠标放到标签上的时候 -
:active“激活”，鼠标点击标签，但是不松手时。 -
:focus是某个标签获得焦点时的样式（比如某个输入框获得焦点）
- 对于我们经常用到的a标签，它有4个固定顺序的伪类选择器：
a:link 、a:visited 、a:hover 、a:active
正确状态下，它会这样显示：
未点击前，显示:link指定的 (黑色)；当鼠标悬停时，显示:hover指定的 (红色)；鼠标按下时，显示:active的 (蓝色)；当点击过后，就显示:visited的 (绿色)了。
这四种状态，必须按照固定的顺序写，不然将失效。
a标签的小细节
a{}和a:link{}的区别：
a{}定义的样式针对所有的超链接(包括锚点)a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)
超链接a标签在使用的时候，比较难。因为不仅仅要控制a这个盒子，也要控制它的伪类。
我们一定要将a标签写在前面，将:link、:visited、:hover、:active这些伪类写在后面。
-
:focus是某个标签获得焦点时的样式，例如输入框获得焦点时：
:foucus
- 在CSS3中，又新增了其它的伪类选择器——结构伪类选择器：即通过结构来进行筛选。
-
E:first-child匹配父元素的第一个子元素E。 -
E:last-child匹配父元素的最后一个子元素E。 -
E:nth-child(n)匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起。 -
E:nth-child(odd)匹配奇数 -
E:nth-child(even)匹配偶数 -
E:nth-last-child(n)匹配父元素的倒数第n个子元素E。
这里的父元素，是指 E 元素的父元素。并且以上选择器所选的元素，必须是指定的类型E，如果选不中，则无效。以下例来展示：
接着还有同类型的筛选兄弟元素：
-
E:first-of-type匹配同类型中的第一个同级兄弟元素E。 -
E:last-of-type匹配同类型中的最后一个同级兄弟元素E。 -
E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E。 -
E:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素E。
我们可以理解成，先在同级里找到所有的E类型，然后根据 n 进行匹配。例如：
具体的伪类选择器，可以看下图表格：
E:empty 匹配没有任何子节点（包括空格等text节点）的元素E。
E:target 匹配相关URL指向的E元素。要配合锚点使用。
三、属性选择器
属性选择器的标志性符号是 []。
匹配字符中，^代表开头，$表示结尾， *表示包含。具体写法如下：
-
E[title]选中页面的E元素，并且E存在 title 属性即可。 -
E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。 -
E[attr~=val]选择具有 attr 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。 -
E[attr|=val]表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。 -
E[title^="abc"]选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。 -
E[title$="abc"]选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。 -
E[title*="abc"]选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。
具体如下：
四、伪元素选择器
伪元素选择器的标志性符号是 :: 。具体写法如下：
-
E::before设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。 -
E::after设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
E:after、E:before在旧版本里是伪类，在 CSS3 这个版本里是伪元素。CSS3版本里，E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。
通过伪元素选择器，就可以添加出类似于span标签的效果（记得要结合 content 属性使用）。
通过这两个属性添加的伪元素，是行内元素，需要转换成块元素才能设置宽高。
-
E::first-letter设置元素 E 里面的第一个字符的样式。 -
E::first-line设置元素 E 里面的第一行的样式。 -
E::selection设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
举例如下：
五、多元素组合选择器
| 选择器 | 释义 |
|---|---|
| E,F | 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 |
| E F | 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 |
| E>F | 子元素选择器，匹配所有E元素的直接子元素F |
| E+F | 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F |
| E~F | 普通相邻选择器，匹配E元素之后的同级元素F，无论直接相邻与否。 |
| EF | 交集选择器，E与F连写时无分隔符，匹配同时包含E与F的元素，可以用标签+id或class的方式表示元素。 |
由于多元素组合选择器细细讲来太多了，所以下次有空我再慢慢写出来。
引用链接：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started/Selectors
https://www.cnblogs.com/qianguyihao/p/8426799.html
http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
