伪类，伪元素和组合，css各类选择器解析

css选择器可分为几个大类：

1. 基础选择器
2. 伪类选择器
3. 属性选择器
4. 伪元素选择器
5. 多元素组合选择器

一、基础选择器

基础选择器包含以下几种：

• * 通用元素选择器，匹配页面任何元素
• #id id选择器，匹配指定的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）更具确定度。例如：

1. 当类选择器和标签选择器同时指定字体颜色时

<div class="demo" id="nav">demo div1</div>

#nav{ color:red; }
.demo{ color:yellow; }

最终字体颜色为红色。

2. 当类选择器和标签选择器同时指定字体颜色时

<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; }

外部p元素无变化

所有标签为div，以及在div标签内的p元素字体都变为了红色，div外的p标签没有变色。

二、伪类选择器

css中伪类是加在选择器后面，用来指定元素状态的关键字。比如，:hover 会在鼠标悬停在选中元素上时应用相应的样式。
伪类选择器的标志性符号是 : 。

css中有一些常用伪类选择器：

• :link 超链接点击之前
• :visited 链接被访问过之后
• :hover “悬停”，鼠标放到标签上的时候
• :active “激活”，鼠标点击标签，但是不松手时。
• :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

1. 对于我们经常用到的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这些伪类写在后面。

2. :focus 是某个标签获得焦点时的样式，例如输入框获得焦点时：
   :foucus

3. 在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