[id*=section1]{background-
color:yellow}表示id中
擁有section1的背景顏色都設為黃色
[id^=section1]{background-
color:red}表示id中
開頭為section1的背景顏色都設為紅色
[id$=section1]{background-
color:blue}表示id中
結尾為section1的背景顏色都設為藍色
注意:如果[id$=\-1]這里的“\”表示轉義字符
2. 偽元素選擇器:first-line first-letter before after
first-line:用於為某個元素中的第一行文字使用樣式。
first-letter:用於為某個元素中的文字的首字母或第一個字使用樣式。例:p:first-letter{color:red}
before:用於在某個元素之前插入一些內容。例:li:before{content:* ; color:red}
after:用於在某個元素之后插入一些內容。例:li:after{content:url("http://www.baidu.com")}
3. 結構性偽類選擇器:root not empty target
root:將樣式綁定到頁面的根元素中,在Html中跟元素就是指包含整個頁面的<html>部分。例子, :root{background-color:yellow;}
not:如果想對某個結構元素使用樣式,但是想排除這個結構元素下面惡子結構元素,讓它不是用這個樣式時,可以使用not選擇器。例子,body *:not(h1){background-color:green}
empty:指定當元素內容為空白時使用的樣式。例子,:empty{background-color:black;}
target:對頁面中某個target元素(該元素的id被當作頁面中的超鏈接來使用)指定樣式,該樣式只在用戶點擊了頁面中的超鏈接,並且跳轉到target元素后起作用。例子, :target{background-color:red}
4. 選擇器:first-child last-child nth-child nth-last-child
first-child:單獨指定第一個子元素的樣式,例,li:first-child{background-color:red}
last-child:單獨指定最后一個子元素的樣式,例,li:last-child{background-color:blue}
nth-child & nth-last-child:不僅可以指定某個父元素中第一個子元素以及最后一個子元素的樣式,還可以針對父元素中某個指定序號的子元素來指定樣式。例,li:nth-child(2){background-color:yellow} --表示第二個子元素--
nth-child & nth-last-child:除了對指定序號的子元素使用樣式外,還可以對某個父元素中所有第奇數個子元素或第偶數個子元素使用樣式。例,li:nth-child(even){} --所有正數下來的第偶數個子元素-- 或者 li:nth-last-child(odd){} --所有倒數上去的第奇個子元素--
***nth-child與nth-last-child選擇器在計算子元素是是第奇個元素還是第偶數個元素的時候是連同父元素中的所有子元素一起計算的。以下是的選擇器能夠解決這個問題。
nth-of-type && nth-last-of-type:使用這兩個選擇器在計算第奇數個子元素還是第偶數個子元素的時候,就只針對同類型的子元素進行計算。例,h2:nth-of-type(odd){}
循環使用樣式:nth-child(an+b) a表示每次循環中共包含幾種樣式,b表示指定的樣式在循環中所處的位置。
5. only-child選擇器
li:only-child{} 等同於 li:nth-child(1):nth-last-child(1){} 表示當父元素只有一個子元素時才使用樣式。
6. UI元素狀態偽類選擇器:指定的樣式只有當元素處於某種狀態下是才起作用,在默認狀態下不起作用。

使用時參考Html5與CSS3電子書版(236)
7. 通用兄弟選擇器:用來指定位於同一個父元素之中的某個元素之后的所有其他某個種類的兄弟元素所使用的樣式。同級是指子元素和兄弟元素的父元素是同一個元素。例,
div - p{background-color:blue;}

