您的位置:首页 - web前端
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 属性的元素添加样式。
本站导航
相关文章
柯乐义 Copyright© keleyi.com