首页 > 代码库 > css选择器

css选择器

1、标签选择器 E{}

2、ID选择器 #id{}

3、类选择器.class{}

4、群组选择器E1,E2,E3{}

5、后代选择器E F{}

6、通配选择器*{}

7、伪类选择器E:Pseudo-elements{}

8、子选择器E>F{}

9、临近选择器E+F{}

10、属性选择器E[attr]{}

 

选择器的特殊性

  特殊性值表述为4个部分,如:0,0,0,0。

  一、对于选择器中的ID属性值,加0,1,0,0

  二、对于选择器中的类属性值属性选择伪类,加0,0,1,0

  三、对于选择器中的各个元素伪元素,加0,0,0,1

  四、结合符(+,>,~)和通配选择器对特殊性没有任何贡献,加0,0,0,0

  五、行内样式style="",加1,0,0,0

  六、!important,加1,0,0,0,0最高

css选择器 +:相邻选择符,例如:x + y选择紧跟x元素之后的第一个y元素。

css选择器 ~:相邻选择符,例如:x ~ y选择紧跟x元素之后的所有y元素。

css选择器 >:子代选择器,例如:x > y选择作为x元素子元素的y元素。

h1{color:#f90;} /* 0,0,0,1 */p em{color:#fff}/* 0,0,0,2 */.title{color:#333;}/* 0, 0,1,0*/*.author{color:#111;}/* 0,0,1,0 */p.name span.sex{color:#f00;}/* 0,0,2,2 */#ele{color:#00f;}/* 0,1,0,0 */div#nav *[href] {color:#111;}/* 0,1,1,1 */

css伪元素:

  :first-line  向文本的首行添加特殊样式,只能作用于块元素。

  :first-letter  向文本的第一个字母添加特殊样式,只能作用于块元素。

  :before  在元素之前添加内容。

  :after   在元素之后添加内容

 

css伪类:

  :link  向未被访问的链接添加样式。

  :visited  向已被访问的链接添加样式。

  :hover  当鼠标悬浮在元素上方时,向元素添加样式。

  :active  向被激活的元素添加样式。

  :first-child 向元素的第一个子元素添加样式。

  :focus 向拥有键盘输入焦点的元素添加样式。

  :lang  向带有指定 lang 属性的元素添加样式。

 

css选择器