css選擇器(常規選擇器，僞類選擇器，僞元素選擇器，根元素選擇器)

時間 2019-11-10

標籤 css 選擇器常規元素欄目 CSS 简体版

原文原文鏈接

前言

CSS的一個核心特性是能向文檔中的一組元素類型應用某些規則，本文將詳細介紹CSS選擇器html

選擇器

【通配選擇器】
星號*表明通配選擇器，能夠與任何元素匹配瀏覽器

*{color: red;}

【元素選擇器】
文檔的元素是最基本的選擇器字體

html{color: black;}
p{color: gray;}
h2{color: silver;}

【類選擇器】
類選擇器用於選擇一類元素firefox

.div{color: red;} // 單個類的選擇
.div1.div2{color: red;} // 多個類的選擇，既包含div1類也包含div2類的元素將被選擇
p.div{color: red;} // p元素且包含div類的元素將被選擇

【ID選擇器】
ID選擇器用於選擇一個元素code

#test{color: red;}
div#test{color: red;} 結合元素選擇ID

[注意]在實際中，瀏覽器並不會檢查ID的惟一性，設置多個ID，能夠爲這些具備相同ID的元素應用相一樣式，但在編寫DOM腳本時只能識別該id的第一個元素。htm

【屬性選擇器】
屬性選擇器根據元素的屬性及屬性值來選擇元素(IE6-不支持)繼承

// 簡單屬性選擇器
h1[class]{color: red;}
img[alt]{color: red;}
a[href][title]{color: red;}
#div[class]{color: red;}
.box[id]{color: red;}
[class]{color: red;}

// 具體屬性選擇器
a[href="http://www.baidu.com"][title="baidu"] {color: red;}
[class="test box"]{color: red;} // class裏面的值以及順序必須徹底相同，而且不可多空格或者少空格
[id="tox"]{color: red;}   // ID選擇器和指定id屬性的屬性選擇器並非一回事，主要在於優先級不一樣

// 部分屬性選擇器
[class ~="b"] 選擇class屬性值在用空格分隔的詞列表中包含詞語"b"的全部元素，例如：class="ab"不知足[class ~="b"]，而class="a b"或class="b"知足
[class |="b"] 選擇class屬性值等於b或以b-開頭的全部元素，例如：class="ab"或class="ab-"不知足[class |="a"]，而class="a"或class="a-"知足
[class ^="b"] 選擇class屬性值以"b"開頭的全部元素
[class $="b"] 選擇class屬性值以"b"結尾的全部元素
[class *="b"] 選擇class屬性值包含"b"的全部元素

【分組選擇器】
將要分組的選擇器放在規則左邊，並用逗號隔開文檔

h1,p{color: red;} // 選擇了h1 和 p 元素

【後代選擇器】get

ul li{color: red;} // ul 下面的全部 li元素 將被選擇
div p, ul li{color: red;} // div元素 下面的全部p元素將被選擇 而且 ul下面的全部 li元素將被選擇

子元素選擇器(IE6-不支持)input

ul > li{color: red;} // ul下面的子元素 li將被選擇 ， 不選中孫子元素

【兄弟元素選擇器】

// 相鄰兄弟選擇器(IE6-不支持)
h1 + p{color: red;}  // 選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素
[注意]兩個元素之間的文本內容不會影響相鄰兄弟結合符起做用

僞類選擇器

僞類順序：link-visited-focus-hover-active

【靜態僞類(只應用於超連接)】
[注意]visited僞類只能設置字體顏色、邊框顏色、outline顏色的樣式

:link       未訪問
:visited    已訪問
a:link{color: red;}
a:visited{color: green;}

【動態僞類(可應用於任何元素)】

:focus     擁有焦點(IE7-不支持)
:hover     鼠標停留(IE6-不支持給<a>之外的其餘元素設置僞類)
:active    正被點擊(IE7-不支持給<a>之外的其餘元素設置僞類)

【目標僞類:target(IE8-不支持)】
匹配錨點對應的目標元素

:target{color: red;}
#test :target{color: red;}//id爲test的目標元素

【UI元素僞類(IE8-不支持)】

:enabled    可用狀態
:disabled    不可用狀態
:checked    選中狀態

input:enabled{color: red} // [注意]input和:和enabled之間都不能夠有空格

【結構僞類(IE8-不支持)】

E:first-child(IE6-不支持) 父元素的第一個子元素,且該子元素是E，與E:nth-child(1)等同
E:last-child(IE6-不支持) 父元素的最後一個子元素，且該子元素是E，與E:nth-last-child(1)等同
:root   選擇文檔的根元素，即<html>元素
E F:nth-child(n) 選擇父元素的第n個子元素，父元素是E，子元素是F
E F:nth-last-child(n) 選擇父元素的倒數第n個子元素，父元素是E，子元素是F
E F:nth-of-type(n) 選擇父元素的具備指定類型的第n個子元素，父元素是E，子元素是F
E F:nth-last-of-type(n) 選擇父元素的具備指定類型的倒數第n個子元素，父元素是E，子元素是F
E:first-of-type 選擇父元素中具備指定類型的第1個子元素，與E:nth-of-type(1)相同
E:last-of-type  選擇父元素中具備指定類型的最後1個子元素，與E:nth-last-of-type(1)相同
E:only-child    選擇父元素中只包含一個子元素，子元素是E
E:only-of-type  選擇父元素中只包含一個同類型的子元素，子元素是E
E:empty 選擇沒有子元素的元素，並且該元素也不包含任何文本節點

[注意]n能夠是整數(從1開始)，也能夠是公式，也能夠是關鍵字(even、odd)

p:first-child    表明的並非<p>的第一個子元素，而是<p>元素是某元素的第一個子元素
p > i:first-child    匹配全部<p>元素中的第一個<i>元素
p:first-child i 匹配全部做爲第一個子元素的<p>元素中的全部<i>元素

【:lang 至關於|=屬性選擇器(IE7-不支持)】

p:lang(en) 匹配語言爲"en"的<p>

【僞類的結合】

a:visited:hover:first-child{color: black;} // [注意]順序無關

僞元素選擇器

IE8-瀏覽器僅支持僞元素選擇器的單冒號表示法

【:first-letter 設置首字母樣式】
全部前導標點符號應與第一個字母一同應用該樣式；
只能與塊級元素關聯；
只有當選擇器部分和左大括號之間有空格時，IE6-瀏覽器才支持。由於first-letter中存在鏈接符的緣由

p:first-letter {color: red;}

【:first-line 設置首行樣式】
只能與塊級元素關聯；
只有當選擇器部分和左大括號之間有空格時，IE6-瀏覽器才支持。由於first-line中存在鏈接符的緣由

p:first-line{color: red;}

【:before 在元素內容前面插入內容(IE7-不支持)】
默認這個僞元素是行內元素，繼承元素可繼承的屬性；
全部元素都必須放在出現該僞元素的選擇器的最後面。

p:before{content:"text"}

【:after 在元素內容後面插入內容(IE7-不支持)】
默認這個僞元素是行內元素，繼承元素可繼承的屬性

p:after{content:"text"}

【::selection 匹配被用戶選擇的部分】
目前selection只支持color和background兩個屬性，且只支持雙冒號寫法(IE8-瀏覽器不支持)

::-moz-selection 　　 firefox瀏覽器須要添加前綴

【根元素選擇器】
根元素選擇器:root用來選擇HTML元素，但因爲其實質是僞類選擇器，因此其優先級更高。在HTML上設置的樣式，若是在:root上也設置了一樣的樣式，則會被覆蓋

html{font-size:20px;}
:root{font-size:30px;}

最終是30px

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。