CSS3选择器笔记

1.属性选择器：

[id=test] {…} 选择id=test字符串的元素

[id*=test] {…} 选择id存在test字符串的元素

[id^=test] {…} 选择id 以test字符串开头的元素

[id$=test] {…} 选择id以test结尾的元素

 

2.伪类选择器、伪元素：

p:first-line{…} 选择p元素中第一行的文字元素

p:first-letter{…} 选择p元素中的第一个文字元素

p:before{content:’…’} 选择p元素，在它之前插入一些内容

p:after{content:’…’} 选择p元素，在它之后插入一些内容

 

3.选择器root、not、empty、和target

:root{background: red;} 设置html文档的背景色

:not(p){…} 设置非p元素的背景色

:empty{…} 设置当元素内容为空时指定的样式

:target{…} 设置跳转到target元素的样式

 

4.选择器first-child、last-child、nth-child、和nth-last-child

li:first-child{…} 选择父元素中第一个子元素

li:last-child{…} 选择父元素中最后一个子元素

li:nth-child(2){…} 选择父元素第2个元素

li:nth-child(4n+4){…} 选择父元素第4的倍数

li:nth-last-child(2){…} 选择父元素倒数第2个元素

li:nth-child(add){…} 选择父元素中正数下来的奇数元素

li:nth-child(even){…} 选择父元素中正数下来的偶数元素

li:nth-last-child(add){…} 选择父元素中倒数上去的奇数元素

li:nth-last-child(even){…} 选择父元素中倒数上去的偶数元素

 

5.选择器nth-of-type、nth-last-of-type、和only-child

h2:nth-of-type(add){…} 选择针对同类型的子元素进行计算，选择正数下来的奇数元素

h2:nth-of-type(even){…} 选择针对同类型的子元素进行计算，选择倒数上去的偶数元素

li:only-child{…} 选择父元素中只有一个子元素的

 

6.ui元素状态伪类选择器 选择器e:hover、e:active、e:focue

a:hover{…} 选择当鼠标移入到某个元素上面使用的样式

a:active{…} 选择当鼠标按下某个元素并且没有松开时使用的样式

a:focue{…} 选择当某个元素获得光标焦点时候使用的样式

 

7.伪类选择器e:enabled、和e:disabled

e:enabled{…} 用来选择当前元素处于可用状态的样式

e:disabled{…} 用于选择当前元素处于不开用状态的样式

8.伪类选择器e:read-only、和e:read-write

e:read-only{…} 用来指定当元素处于只读状态的样式

e:read-write{…} 用来指定当元素处于非只读状态的样式

 

9.伪类选择器e:checked、e:default、和e:indeterminate、e::selection

e:checked{…} 用来指定当单选框或复选框处于选中状态的样式，火狐浏览器为-moz-checked

e:default{…} 用来指定当页面打开时默认处于选中状态时的样式，当用户改为非选中状态，样式依然存在

e:determinate{…} 用来指定当页面打开时，一组单选款中任何一个都没有选中时整组的样式，仅适用opera

e::selection{…} 用来指定当元素处于指定状态时候的样式

 

10.通用兄弟元素选择器 e~e

div~p{…} 用来指定位于同一个父元素之中，某个元素之后的其他种类兄弟元素所使用的样式