CSS3選擇器

基本選擇器

非CSS3新增的選擇器（最最基本的選擇器）

　　通配符選擇器：選中文檔中全部元素

　　元素選擇器：選中文檔中某一標籤的全部元素

　　類選擇器：選中文檔中某一class屬性值的全部元素

　　ID選擇器：選中文檔中特定ID值的元素

　　後代選擇器：結合元素、類和ID選擇器，選中父元素下的某一子元素，父元素和子元素間用空格隔開

　　羣組選擇器：把須要應用相一樣式的選擇器放在一塊兒，中間逗號隔開

　　

CSS3新增的選擇器

子元素選擇器（直接後代選擇器）

　　只能選取元素下的子元素，不可選中孫元素

　　語法爲父元素>子元素

　　

相鄰兄弟元素選擇器

　　選取指定元素相鄰的下一個元素爲指定元素的元素（說法有點繞，具體看圖例）

　　語法爲父元素>子元素+兄弟元素（只有緊鄰指定子元素的第一個兄弟元素被選中）

　　

通用兄弟選擇器

　　選取指定元素的後續全部指定類型的元素（具體看案例）

　　語法爲父元素>子元素~兄弟元素（子元素後全部指定的兄弟元素所有被選中）

　　

 

屬性選擇器

　　選中帶有指定屬性的HTML元素並設置樣式

　　主要是針對其中的屬性值來設置的

　　element[attribute]：選擇全部帶有attribute屬性的元素

　　element[attribute="value"]：選擇全部attribute屬性值爲value的元素（必須如出一轍）

　　element[attribute~="value"]：選擇全部attribute屬性值包括value的元素（包括完整單詞）

　　element[attribute^="value"]：選擇全部attribute屬性值開頭爲value的元素

　　element[attribute$="value"]：選擇全部attribute屬性值結尾爲value的元素

　　element[attribute*="value"]：選擇全部attribute屬性值包括value的元素（包括其中的字母便可）

　　element[attribute|="value"]：選擇全部attribute屬性值開頭爲value或value-的元素

 

僞類選擇器

　　該類元素並不真實存在於HTML中，只有用戶和網頁交互時才體現出來

動態僞類

錨點僞類

　　link：超連接默認的狀態

　　visited：超連接被訪問事後的狀態

用戶行爲僞類

　　hover：鼠標懸停時狀態

　　active：鼠標點擊後狀態

　　focus：表單中的input元素等光標在其中時的狀態

UI元素狀態僞類

　　enabled：針對input、textarea等表單元素中沒有設置disabled屬性的元素生效

　　disabled：針對input、textarea等表單元素中設置disabled屬性的元素生效

　　checked：針對checkbox、radio等選擇框表單元素，選中時觸發

　　

 

結構類選擇器

　　選定指定順序位置的元素

按照子元素的位置選擇

　　element:first-child：選中以該element爲某個元素第一子節點的元素

　　element:last-child：選中以該element爲某個元素最後子節點的元素

　　element:nth-child(N)：選中element元素爲某個元素下的第N個子元素的元素，從1開始計數

　　element:nth-last-child(N)：相似於element:nth-child(N)，不過是倒過來數

　　其中參數N能夠設置爲n（n恆定從0開始取值），即會遍歷某個父元素下第0-n個（全部）爲element的元素，也可設置爲odd（奇數）/even（偶數）/帶有n的表達式（如2n+1）

　　以上選擇方法由於較難控制，通常結合其餘選擇器同時使用

 　　

按照子元素的類型和位置選擇

　　element:first-of-type：選定某父元素下element元素中的第1個element元素

　　element:last-of-type：選定某父元素下element元素中的最後一個element元素

　　element:nth-of-type(N)：選定某父元素下element元素中的第n個element元素

　　能夠理解成只挑選出element元素，而後排序選出其中的第N個

　　element:nth-last-of-type(N)：相似於element:nth-of-type(N)，不過是反過來數

　　

其餘

　　element:only-child：選定某父元素下element爲其惟一子元素的element元素

　　element:only-of-type：選定某父元素下element爲其中惟一的element元素的element元素（有點繞，看下方例子）

　　

　　empty：選擇沒有子元素（包括文本）的元素

　　

 　　not：選擇非該元素的某元素的全部子元素

　　

 

權重

　　當CSS中添加不少選擇器時，會根據權重計算出哪一個選擇器中的樣式發揮做用

　　行內樣式（1000）>ID選擇器（100）>類、屬性、僞類選擇器（10）>元素和僞元素（1）>通配符（0）

　　被繼承的css屬性權重爲0

 

僞元素

　　用來向某些選擇器設置特殊效果，能夠理解成在HTML中增長了一個本來不存在的元素

　　一般爲了區分，會用element::僞元素這樣的語法格式，實際上新版本的瀏覽器一個冒號也可識別

first-line

　　對塊級元素的第一行文本設置樣式

first-letter

　　對塊級元素的第一個字符設置樣式

before

　　在元素內容前插入內容（常配合content使用），該內容將成爲元素的第一個子元素

　　插入的內容不可選中，找不到對應的標籤，做爲行級元素存在，但能夠對其設置樣式

　　

after

　　在元素內容後插入內容（常配合content使用），常在清除浮動中使用

　　

selection

　　設置文本選中後的前景色和背景色