新手初識 css復合選擇器

2021-10-24 11:58:02 字數 1023 閱讀 7190

css的復合選擇器主要有五種 css選擇器分為 基礎選擇器 和 復合選擇器 ,但是基礎選擇器不能滿足我們實際開發中,快速高效的選擇標籤。

而復合選擇器可以選擇更準確更精細的目標元素標籤。

復合選擇器是由兩個或多個基礎選擇器,通過不同的方式組合而成的

復合選擇器主要有五種

1.後代選擇器

概念:後代選擇器又稱為包含選擇器

作用:用來選擇元素或元素組的子孫後代

其寫法就是把外層標籤寫在前面,內層標籤寫在後面,中間用空格分隔,先寫父親爺爺,在寫兒子孫子。

基本格式: 父級 子級

.class h3 在類名為class的標籤裡所有的h3標籤都會應用樣式

2.子元素選擇器

作用:子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。

其寫法就是把父級標籤寫在前面,子級標籤寫在後面,中間跟乙個 > 進行連線

基本格式: 父級》子級

.class>h3 在類名為class的標籤表層裡的h3標籤會應用此樣式,巢狀更深的不會應用

3.交集選擇器

交集選擇器由兩個選擇器構成,找到的標籤必須滿足:既有標籤一的特點也有標籤二的特點

基本格式: 標籤選擇器類別選擇器

h3.class 只有類名為class的h3標籤才會應用此樣式

4.並集選擇器

應用:如果某些選擇器定義的相同樣式,就可以利用並集選擇器,可以讓**更簡潔。

並集選擇器樣本: .class,h3

任何形式的選擇器(包括標籤選擇器、class類選擇器id選擇器等),都可以作為並集選擇器的一部分。

並集選擇器通常用於集體宣告 ,逗號隔開的,所有選擇器都會執行後面樣式,逗號可以理解為和的意思。

5.鏈結偽類選擇器

a:link 未訪問的鏈結

a:visited 已訪問的鏈結

a:hover 滑鼠移動到鏈結上

a:active 選定的鏈結

總結

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