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 屬性的元素添加樣式。