CSS选择器图文详解

1、什么是选择器呢？

选择器，说白了就是用一种方式把你想要的那一个标签选中！把它选中了，你才能操作这个标签的CSS样式。CSS有很多把你所需要的标签选中的方式，这些不同的方式就是不同的选择器。
选择器的不同，在于它选择方式不同，但是他们的目的都是相同的，那就是把你需要的标签选中，然后让你定义该标签的CSS样式。当然，你也有可能会用某一种选择器代替另一种选择器，这仅仅是由于选择方式不一样罢了，目的还是一样的。

2、标签选择器

元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。
语法：

3、id选择器

我们可以为元素设置一个id，然后针对这个id的元素进行CSS样式操作。注意，在同一个页面中，不允许出现两个相同的id，这个就像没有哪两个人的身份证号是相同的道理一样。
注： id名前面必须要加上前缀“#”，否则该选择器无法生效。id名前面加上“#”，表明这是一个id选择器。

语法：

4、class选择器

也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”设置一个class（类名），然后针对这个class的元素进行CSS样式操作。

注：class名前面必须要加上前缀“.”（英文点号），否则该选择器无法生效。类名前面加上“.”，表明这是一个class选择器。

语法：

5、后代选择器

后代选择器，就是选中某个元素下的子孙元素，然后对该子元素设置CSS样式。

注：父元素与子孙元素必须用空格隔开，从而表示选中某个元素下的子孙元素。

语法：

6、群组选择器

群组选择器，就是同时对几个选择器进行相同的操作。

注：对于群组选择器，两个选择器之间必须用“,”（英文逗号）隔开，不然群组选择器无法生效。

语法：

7、属性选择器

属性选择器，通过标签属性来选择相同的样式。
语法：

8、伪类选择器

CSS伪类是用来添加一些选择器的特殊效果。伪类选择器，它用于描述元素的动态特征，再根据元素的特殊状态来选择元素，常用的有结构、链接和表单等伪类。注意，伪类只对它依附的元素起作用，并且多个伪类可拼接在一起。

注： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

first-child 选择父元素的第一个子元素。

代表所有<p>元素的第一个 <i> 元素：

匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

:last-child可匹配其中的最后一个。
:first-of-type匹配一组兄弟元素中的某种类型的第一个元素
:last-of-type可匹配其中的最后一个

伪元素选择器 用于处理文档内容，可指定某处的内容（即过滤内容）或添加内容。早期的时候，伪元素和伪类都使用单冒号（:）。但最新的CSS3规定伪元素得使用双冒号（::），伪类用单冒号，这样两者的区分能更明显。注意，伪元素只能出现在选择器的最后位置，并且不能同时定义多个伪元素。

可能会改变dom结构，创建虚拟dom。
:before 可以在元素的内容前面插入新内容。
:after 可以在元素的内容之后插入新内容。
::first-letter会匹配块级元素内容的第一行的首字符