CSS復合選擇器(自學筆記)

2021-10-06 09:52:51 字數 1283 閱讀 2362

復合選擇器是由兩個或多個基礎選擇器,通過不同的方式組合而成,目的是為了選擇更準確更精細的目標元素標籤。

它是由兩個選擇器構成,其中乙個是標籤選擇器,乙個是類選擇器;語法如下

h3.class

兩個選擇器之間不能存在空格;

交集選擇器 是 並且的意思。 即…又…的意思

比如: p.one 選擇的是: 類名為 .one 的 段落標籤,但用的相對來說比較少。

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

並集選擇器(css選擇器分組)是各個選擇器通過「,」連線而成的,通常用於集體宣告。

語法:.class,h3

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

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

比如 .one, p , #test 表示 .one 和 p 和 #test

這三個選擇器都會執行顏色為紅色,通常用於集體宣告。 他和他,在一起, 在一起 一起的意思

後代選擇器又稱為包含選擇器

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

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

語法:.class h3

當標籤發生巢狀時,內層標籤就成為外層標籤的後代。

子孫後代都可以這麼選擇。 或者說,它能選擇任何包含在內 的標籤。

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

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

語法:.class>h3

比如: .demo > h3 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。

偽類選擇器:和類選擇器相區別類選擇器是乙個點 比如 .demo {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{} 。 注意

a 

a:hover

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