CSS選擇器

時間 2019-11-30

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

前面的話

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

　　[注意]關於選擇器兼容性的詳細信息移步至此html

通配選擇器

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

*{color: red;}

元素選擇器

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

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

類選擇器

　　類選擇器用於選擇一類元素ui

.div{color: red;}

　　一、多類選擇器spa

.div1.div2{color: red;}

　　二、結合元素的類選擇器firefox

p.div{color: red;}

ID選擇器

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

#test{color: red;}

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

　　一、結合元素的ID選擇器blog

div#test{color: red;}

屬性選擇器

　　屬性選擇器根據元素的屬性及屬性值來選擇元素(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裏面的值以及順序必須徹底相同，而且不可多空格或者少空格

[class="test box"]{color: red;}

　　ID選擇器和指定id屬性的屬性選擇器並非一回事，主要在於優先級不一樣

[id="tox"]{color: red;}

　　三、部分屬性選擇器

[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"的全部元素

　　上面三個屬於正則匹配，是CSS3新增的屬性選擇器

分組選擇器

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

h1,p{color: red;}

後代選擇器

ul li{color: red;}
div p, ul li{color: red;}

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

ul > li{color: red;}

兄弟元素選擇器

　　一、相鄰兄弟選擇器(IE6-不支持)

div + p{color: red;}

　　[注意]兩個元素之間的文本內容不會影響相鄰兄弟結合符起做用

　　二、通用兄弟選擇器(IE7-不支持)

　　選擇匹配的F元素，且位於匹配的E元素後的全部匹配的同級F元素

div ~ p {color:red;}

僞類選擇器

　　僞類順序：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 em 就是不合法的

p:before{content:"text"}

　　四、:after 在元素內容後面插入內容(IE7-不支持)

　　默認這個僞元素是行內元素，繼承元素可繼承的屬性

p:after{content:"text"}

　　五、::selection 匹配被用戶選擇的部分

　　目前selection只支持color和background兩個屬性，且只支持雙冒號寫法(IE8-瀏覽器不支持)

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

根元素選擇器

　　單獨把它拿出來說，是由於其特殊性。根元素選擇器:root用來選擇HTML元素，但因爲其實質是僞類選擇器，因此其優先級更高。在HTML上設置的樣式，若是在:root上也設置了一樣的樣式，則會被覆蓋

　　下面是一個例子，常說的rem單位是以根元素的font-size爲標準的

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

　　上面的代碼中，最終1rem=30px

原文網址：https://www.cnblogs.com/xiaohuochai/p/4979514.html

相關標籤/搜索

每日一句

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