CSS選擇器用法大全

要想將CSS樣式應(yīng)用于特定的HTML標(biāo)記，首先需要找到該目標(biāo)標(biāo)記，在CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則部分稱為CSS選擇器。

CSS基礎(chǔ)選擇器

CSS選擇器又分為標(biāo)記選擇器、類選擇器、id選擇器、通配符選擇器、標(biāo)簽指定式選擇器、后代選擇器和并集選擇器，對它們的具體解釋如下。

1. 標(biāo)記選擇器

標(biāo)記選擇器是指用HTML標(biāo)記名稱作為選擇器，按標(biāo)記名稱分類，為頁面中某一類指定統(tǒng)一的CSs樣式。其基本語法格式如下：

標(biāo)記名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}

上述語法中，所有的HTML標(biāo)記名都可以作為標(biāo)記選擇器，例如body、h、p、strong等。用標(biāo)記選擇器定義的樣式對頁面中該類型的所有標(biāo)記都有效。例如，可以使用p選擇器定義HTML頁面中所有段落的樣式，示例代碼如下:

p{font-size:12px;color:#666;font-family:"微軟雅黑";}

上述CS樣式代碼用于設(shè)置HTML頁面中所有的段落文本—字體大小為12px、顏色為#666、字體為微軟雅黑。

標(biāo)記選擇器最大的優(yōu)點(diǎn)是能快速為頁面中同類型的標(biāo)記統(tǒng)一樣式，同時(shí)這也是它的缺點(diǎn)，不能設(shè)計(jì)差異化樣式。

2. 類選擇器類

選擇器使用“.”(英文點(diǎn)號)進(jìn)行標(biāo)識，后面緊跟類名，其基本語法格式如下：

.類名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}

上述語法中，類名即為HTML標(biāo)記的class屬性值，大多數(shù)HML標(biāo)記都可以定義class屬性。類選擇器最大的優(yōu)勢是可以為標(biāo)記對象定義單獨(dú)或相同的樣式。

3. id選擇器

id選擇器使用“#”進(jìn)行標(biāo)識，后面緊跟id名，其基本語法格式如下:

#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}

上述語法中，id名即為HTML標(biāo)記的id屬性中的值，大多數(shù)HTM標(biāo)記都可以定義id屬性，標(biāo)記的id值是唯一的，只能對應(yīng)于文檔中某一個(gè)具體的標(biāo)記。

4. 通配符選擇器

通配符選擇器用“*”號表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的標(biāo)記。其基本語法格式如下：

*{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}

例如，下面的代碼使用通配符選擇器定義CSS樣式，清除所有HTML標(biāo)記的默認(rèn)邊距。

*{
    margin: 0;     /*定義外邊距*/
    padding: 0;     /*定義內(nèi)邊距*/
}

在實(shí)際網(wǎng)頁開發(fā)中不建議使用通配符選擇器，因?yàn)樗O(shè)置的樣式對所有的HTML標(biāo)生效，不管標(biāo)記是否需要該樣式，這樣反而降低了代碼的執(zhí)行速度。

5. 標(biāo)簽指定式選擇器

標(biāo)簽指定式選擇器又稱交集選擇器，由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)記選擇器，第二個(gè)為class選擇器或id選擇器，兩個(gè)選擇器之間不能有空格，如h3.specail或p#one。

6.后代選擇器

后代選擇器用來選擇某標(biāo)記的后代標(biāo)記，其寫法就是把外層標(biāo)記寫在前面，內(nèi)層標(biāo)記寫在后面，中間用空格分隔。當(dāng)標(biāo)記發(fā)生嵌套時(shí)，內(nèi)層標(biāo)記就成為外層標(biāo)記的后代。例如，當(dāng)標(biāo)記內(nèi)嵌套標(biāo)記時(shí)，就可以使用后代選擇器對其中的標(biāo)記進(jìn)行控制。

7.并集選擇器

并集選擇器是各個(gè)選擇器通過逗號連接而成的，任何形式的選擇器(包括標(biāo)記選擇器、類選擇器以及id選擇器等)都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。

例如在頁面中有兩個(gè)標(biāo)題和三個(gè)段落，它們的字號和顏色相同。同時(shí)其中一個(gè)標(biāo)題和兩個(gè)段落文本有下畫線效果，這時(shí)就可以使用并集選擇器定義CSS樣式。

CSS3新增選擇器

CSS3是CSS的最新版本，在CSS3中增加了許多新的選擇器。運(yùn)用這些選擇器可以簡網(wǎng)頁代碼的書寫，讓穩(wěn)當(dāng)?shù)慕Y(jié)構(gòu)更加簡單。CSS3新增的選擇器主要分為屬性選擇器、關(guān)系選擇器、結(jié)構(gòu)化偽類選擇器、偽元素選擇器4類，具體介紹如下。

1、  屬性選擇器

屬性選擇器可以根據(jù)網(wǎng)頁標(biāo)記的屬性及屬性值來選擇標(biāo)記。屬性選擇器一般是一個(gè)記后緊跟中括號“[]”，中括號內(nèi)部是屬性或者屬性表達(dá)式，如下所示：

CSS3中常見的屬性選擇器主要包括E[att^=value]、E[att$=value]和E[att*=value]這三種性選擇器，具體如下所示：

（1）E[att^=value]

例如： div[id^=section]

說明：表示匹配包含id屬性，且id屬性值是以“section”字符串開頭的div標(biāo)記。

（2）E[att$=value]

例如：

div[id$=section]

說明：表示匹配包含id屬性，且id屬性值是以“section”字符串結(jié)尾的div標(biāo)記

（3）E[att*=value]

例如：

div[id*=section]

說明：表示匹配包含id屬性，且id屬性值包含“section”字符串開頭的div標(biāo)記。

2、關(guān)系選擇器

CSS3中的關(guān)系選擇器主要包括子代選擇器和兄弟選擇器，其中子代選擇器由符號連接，兄弟選擇器由符號“+”和“~”連接，具體如下所示。

（1）關(guān)系選擇器

例如：

h1>strong

說明：表示選擇嵌套在h1標(biāo)記的子標(biāo)記strong。

（2）臨近兄弟選擇器

例如：

h2+p

說明：表示選擇h2標(biāo)記后緊鄰的第一個(gè)兄弟標(biāo)記p。

（3）普通兄弟選擇器

例如：

p~h2

說明：表示選擇p標(biāo)記所有的h2兄弟標(biāo)記。

3、結(jié)構(gòu)化偽類選擇器

結(jié)構(gòu)化偽類選擇器可以減少文檔內(nèi)class屬性和id屬性的定義，使文檔變得更加簡潔。下面列舉了常用的結(jié)構(gòu)化偽類選擇器。

:root

用于匹配文檔根標(biāo)記，使用“:root選擇器”定義的樣式，對所有頁面標(biāo)記都生效。

:not

例如：

body*:not(h2)

用于排除body結(jié)構(gòu)中的子結(jié)構(gòu)標(biāo)記h2。

:only-child

例如：

li:only-child

用于匹配屬于某父標(biāo)記的唯一子標(biāo)記(li)，也就是說某個(gè)父標(biāo)記僅有一個(gè)子標(biāo)記（li）。

:first=child

用于選擇父元素第一個(gè)子標(biāo)記。

:last-child

用于選擇父元素最后一個(gè)子標(biāo)記。

:nth-child(n)

例如：

p:nth-child(2)

表示用于選擇父元素第二個(gè)p標(biāo)記。

:nth-last-child(n)

例如：

p:nth-last-child(2)

用于表示父元素倒數(shù)第二個(gè)p標(biāo)記。

:nth-of-type(n)

例如：

h2:nth-of-type(odd)

表示用于選擇所有h2標(biāo)記中位于奇數(shù)行數(shù)的標(biāo)記。

:nth-last-of-type(2)

例如：

p:nth-last-of-type(2)

表示用于選擇倒數(shù)第二個(gè)p標(biāo)記。

:empty

用于選擇沒有子標(biāo)記或者文本內(nèi)容為空的所有標(biāo)記。

4、偽元素選擇器

偽元素選擇器一般是一個(gè)標(biāo)記后面緊跟英文冒號“:”，英文冒號后是偽元素名，如下所示。

需要注意的是，標(biāo)記與偽元素名之間不要有空格，偽元素選擇器常見有:before選擇器和:after選擇器。

:before

例如：

p:before

表示：表示在p標(biāo)記的內(nèi)容前面插入內(nèi)容。

:after

例如：

p:after

表示: 表示在p標(biāo)記的內(nèi)容后面插入內(nèi)容。

需要注意的是，如果想要在文本后面添加是圖片，只需更改content屬性后的內(nèi)容即可。其基本語法格式如下

p: after{content: url(); }

猜你喜歡：

web前端高頻面試試題含答案

CSS3如何設(shè)置顏色不透明度？

如何使用CSS控制視頻的寬高？

CSS結(jié)構(gòu)的特點(diǎn)有哪些？CSS樣式規(guī)則介紹

Css是什么？它的優(yōu)點(diǎn)哪些？

css盒子是什么，在網(wǎng)頁中起到什么作用？

CSS3新增了哪些選擇器？如何是使用？

css清除浮動(dòng)的方法有哪些？

傳智教育高級web前端開發(fā)培訓(xùn)課程