CSS选择器

一：兄弟相邻选择器 element+element

1.element+element  选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素

2.element1~element2 选择器 element1 之后出现的所有 element2。(两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1)

二：属性选择器 attribute

1. E[attr]：只使用属性名，但没有确定任何属性值；

2. E[attr="value"]：指定属性名，并指定了该属性的属性值；

3. E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“~”不能不写；

4. E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；

5. E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；

6. E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；

7. E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

三：伪类选择器（切记顺序：爱恨原则）

1.  :link 伪类向未访问的链接添加特殊的样式。

2.  :visited 伪类向已访问的链接添加特殊的样式。

3.  :hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。

4.  :active 伪类向激活（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。

四：结构性伪类选择器

1.  :root选择器用匹配文档的根元素。

2.  :not(selector) 选择器匹配非指定元素/选择器的每个元素。

3.  :empty 选择器匹配没有子元素（包括文本节点）的每个元素。

4.  :target 选择器可用于选取当前活动的目标元素。

5.          URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。

6. 这个被  链接的元素就是目标元素(target element)。

7.  :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

8.  :last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

9.  :only-child 选择器匹配属于其父元素的唯一子元素的每个元素。

10.  n:(even、odd、ab+b)

1. E:nth-child(n) 选择器匹配属于其父元素的第n个子元素，并且这个元素还得是E元素；

2. E:nth-last-child(n) 选择器匹配属于其元素的第n个子元素的每个元素，并且这个元素还得是E元素，从最后一个子元素开始计数。

3. :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

4. :nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数

五：UI元素状态伪类选择器

1.  :focus 选择器用于选取获得焦点的元素。

2.  :enabled选择器被用来指定当元素处于可用状态时的样式。

3.  :disabled选择器被用来指定当元素处于不可用状态时的样式。

4.  :read-only选择器被用来指定当元素处于只读状态时的样式。

5.  :read-write 选择器用于匹配可读及可写的元素。

6.  :checked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。

7.  :default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。

8.  :indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。

9.  :selection伪类选择器用来指定当元素处于选中状态时的样式。

六：伪元素选择器

1.  :first-line 选择器用于选取指定选择器的首行。

2.  :first-letter:为某个元素中的文字的首字母或第一个字使用样式；

3.  :before:在某个元素之前插入一些内容；(请使用 content 属性来指定要插入的内容。)

4.  :after: 在某个元素之后插入一些内容；(请使用 content 属性来指定要插入的内容。)