首页 > 代码库 > 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选择器