談談CSS中的幾種選取器

今天本文主要和大家談談CSS中的幾種選取器 ,需要的朋友可以參考下，希望能協助到大家。

1、萬用字元選取器

萬用字元選取器用“*"號表示，是所有選取器中作用範圍最廣的，能匹配頁面中所有的元素

/*設定當前頁面中所有標籤的顏色為紅色*/* {color: red;}

2、標籤選取器

標籤選取器就是選擇當前頁面中相同名字的標籤

/*設定所有p標籤的文字顏色為紅色*/p {color: red;}

3、ID選取器

id選取器使用"#"進行標識，後面緊跟id名

{:;}

這是標題

注意HTML標籤中ID的屬性值在一個頁面中必須是唯一的（是W3C規範而不是硬性規則）。

ID選取器命名規範

• 只允許出現字母（大小寫均可，嚴格區分） 、底線、數字，也就是說，id=”Head”和 id=”head”不衝突

• 只允許以字母開頭

• 命名沒有長度限制，可以是1個字母，也可以是很多個，不過不建議太長

• 不允許出現標籤名（不是硬性規定)

4、類別選取器

類別選取器就是選取頁面中所有標籤的class屬性值相同的一類標籤，用.（點）表示

{:;}

這是標題1

這是標題2

一個標籤可以包含多個類別選取器，在class標籤中用空格隔開。

.head {color: blue;}.subHead {font-size: 50px;}

這是標題2

5、複合選取器

5.1、交集選取器

交集選取器又稱標籤指定式選取器，由兩個選取器構成，其中第一個為標記選取器，第二個為class選取器或id選取器，兩個選取器之間不能有空格，如

h3.special  /* 需要滿足標籤是h3同時擁有special類 */

或

p#one /* 需要滿足標籤是p同時id為one */

5.2、並集選取器

並集選取器是各個選取器通過逗號串連而成的，任何形式的選取器（包括標記選取器、class類別選取器id選取器等），都可以作為並集選取器的一部分。如果某些選取器定義的樣式完全相同，或部分相同，就可以利用並集選取器為它們定義相同的CSS樣式

/*同時給標籤h3與class為box的元素設定樣式*/h3, .box {color: red;font-size: 14px;}

5.3、後代選取器

後代選取器用來選擇元素或元素組的後代，其寫法就是把外層標記寫在前面，內層標記寫在後面，中間用空格分隔。當標記發生嵌套時，內層標記就成為外層標記的後代（後代不僅僅包括兒子，還包括子子孫孫）。