【CSS】选择器及样式优先级

总结

1.选择器类型

    ID 选择器

    类选择器、属性选择器、伪类选择器

    元素选择器(标签选择器)、关系选择器(层次选择器)、伪元素选择器

    通配符选择器

2.样式优先级

注意：

(1) ... > 通配符 > 继承 > 浏览器默认属性。

(2) 可以实现自动继承的样式：font-size、text-indent、line-height。

3.选择器详解

（1）基本选择器：

         ID 选择器（#id）、 类选择器（.class）、元素选择器（E）、通配符选择器（*）、群组选择器

（2）属性选择器：

         E[attr]、E[attr=val]、E[attr|=val]、E[attr~=val]、E[attr*=val]、E[attr^=val]、E[attr$=val]

         E[attr]               E可以省略

         E[attr|=val]       作用相当于 E[attr=val] 和 E[attr^=val]

（3）伪类选择器（:）：

         [1] 动态伪类选择器：

              E:link、E:visited、E:acitved、E:hover、E:focus

              输入框：hover / focus(点击以后)

              链接：link(初始呈现，未操作状态) / hover（悬浮时）/ active（点击瞬间）/ visted(看过之后呈现的)

         [2] 目标伪类选择器：E:target

         [3] 语言伪类选择器：E:lang(language)

         [4] UI元素状态伪类选择器：

              E:checked、E:enabled、E:disabled

         [5] 结构伪类选择器：

              E:nth-child(n)、E:nth-last-child(n)、E:first-child、E:last-child、E:only-child

              E:nth-of-type(n)、E:nth-last-of-type(n)、E:first-of-type、E:last-of-type、E:only-of-type

              E:empty、E:root

              E F:nth-child(n) 和 E F:nth-of-type(n) 的区别：

              E F:nth-child(n) 是指元素 E 的第 n 个子元素，如果同时该子元素是元素F，则选中；否则选不中。

              E F:nth-of-type(n) 是指元素 E 的第 n 个 F 子元素。

              n 可以是（odd、even）、（2n+1、2n+2）、（n+5、-n+5）、（3n）等。

 

         [6] 否定伪类选择器：E:not(F)

（4）关系选择器（层次选择器）：

选择器	描述
E  F	后代选择器的作用是选择某元素的所有后代元素。
E>F	子选择器只能选择某元素的子元素。
E+F	相邻兄弟选择器可以选择紧临其后的一个同胞元素。
E~F	通用兄弟选择器可以选择紧临其后的所有同胞元素。

（5）伪元素选择器（::）：

         ::first-letter、::first-line、::before、::after、::selection

         ::before、::after  是指插入额外内容的位置；要为伪元素生成内容，还需要配合 content 属性。

         ::selection  是用来匹配突出显示的文本，且仅接受两个属性，一个是 background ，另一个是 color 。

 

参考：

CSS3选择器

END