CSS的類名交集復合選擇器

2022-03-11 15:37:05 字數 1451 閱讀 9363

「交集」復合選擇器是由兩個選擇器直接連線構成,其結果是選中二者各自元素範圍的交集。其中第乙個必須是標記選擇器,第二個必須是類別選擇器或者id選擇器。這兩個選擇器之間不能有空格,必須連續書寫。

注意其中第乙個必須是標記選擇器,如p.class1,但有時候會看到.class1.class2,即2個都是類選擇器,在其他瀏覽器中是允許出現這種情況的,但ie6不相容。如下表:

兩個類選擇器的「交集」復合選擇器瀏覽器支援表:

mac: safari 4.0

支援mac: chrome 5.0

支援mac: firefox 3.6

支援mac: opera 10

支援win: firefox 3.6

支援win: opera 10

支援win: ie6

不支援win: ie7

支援win: ie8

支援例項demo:

>無標題文件

title

>

<

style

>

body*li

.classone

.classone.classtwo

.classtwo

style

>

head

>

<

body

>

<

ul>

<

li class

="classone"

><

a href

="#"

>classone紅色的

a>

li>

<

li class

="classone classtwo"

><

a href

="#"

>classone and classtwo 綠色的

a>

li>

<

li class

="classtwo"

><

a href

="#"

>classtwo藍色的

a>

li>

ul>

body

>

html

>

效果圖:

CSS選擇器 復合選擇器

選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...

CSS 復合選擇器

以前介紹了3種 標記選擇器 類別選擇器 id選擇器 基本的選擇器,以這3種基本選擇器為基礎,通過組合,還可以產生更多種類的選擇器,實現更強 更方便的選擇功能,復合選擇器就是由基本選擇器通過不同的連線方式構成的。復合選擇器就是兩個或多個基本選擇器,通過不同方式連線而成的選擇器。1.交集 選擇器 交集 ...

CSS復合選擇器

css復合選擇器 復合選擇器是由兩個或多個基礎選擇器,通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標籤。交集選擇器 交集選擇器由兩個選擇器構成,其中第乙個為標籤選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,如h3.special。記憶技巧 交集選擇器 是 並且的意...