CSS復合選擇器

2021-10-13 09:53:33 字數 1729 閱讀 4656

交集選擇器

交集選擇器由兩個選擇器直接連線構成,其中第乙個選擇器必須是元素選擇器,第二個選擇器必須是類選擇器或者 id 選擇器,兩個選擇器之間必須連續寫,不能有空格。

交集選擇器選擇的元素必須是由第乙個選擇器指定的元素型別,該元素必須包含第二個選擇器對應的 id 名或類名。交集選擇器選擇的元素的樣式是三個選擇器樣式,即第乙個選擇器;

語法:

元素選擇器 . 類選擇器| #id 選擇器
語法說明:「類選擇器| id 選擇器」表示使用類選擇器,或者使用 id 選擇器。

例:

元素選擇器效果 

交集選擇器效果

類選擇器效果

並集選擇器

並集選擇器也叫分組選擇器或群組選擇器,它是由兩個或兩個以上的任意選擇器組成的,不同選擇器之間用「,」隔開,實現對多個選擇器進行「集體宣告」。

並集選擇器的特點是所設定的樣式對並集選擇器中的各個選擇器都有效。

並集選擇器的作用是把不同選擇器的相同樣式抽取出來,然後放到乙個地方作一次性定義,從而簡化了 css **量。

語法:

選擇器 1,

選擇器 2,

選擇器 3,

語法說明:選擇器的型別任意,既可以是基本選擇器,也可以是乙個復合選擇器。

例:

這是 div1

這是 div2

這是段落一

這是段落二

這是乙個 span

後代選擇器

後代選擇器又稱包含選擇器,用於選擇指定元素的後代元素。使用後代選擇器可以幫助我們更快更確切地找到目標元素。

語法:

選擇器 1 選擇器 2 選擇器 3
例:

段落一 

段落二

段落三

段落四

段落五

段落六

子元素選擇器

後代選擇器可以選擇某個元素指定型別的所有後代元素,如果只想選擇某個元素的所有子元素,則需要使用子元素選擇器。

語法:

選擇器 1> 選擇器 2
語法說明:「>」稱為左結合符,在其左右兩邊可以出現空格,「選擇器 1> 選擇器 2」的含意為「選擇作為選擇器 1 指定元素的所有選擇器 2 指定的子元素」.

例:

相鄰兄弟選擇器

如果需要選擇緊接在某個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器。

語法:

選擇器 1+ 選擇器 2
例:

這是段落 1。

這是段落 2。

這是段落 3。

屬性選擇器

在 css 中,我們還可以根據元素的屬性及屬性值來選擇元素,此時用到的選擇器稱為屬性選擇器。屬性選擇器的使用主要有 2 種形式,

語法:

屬性選擇器 1 屬性選擇器 2...

元素選擇器屬性選擇器 1 屬性選擇器 2...

語法說明:屬性選擇器的寫法是 [ 屬性表示式 ],其中屬性表示式可以是乙個屬性名,也可以是「屬性=屬性值」等這樣的表示式.

屬性選擇器的應用:

返首頁 

沒有應用屬性選擇器樣式返首頁

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。記憶技巧 交集選擇器 是 並且的意...