CSS復合選擇器

2021-09-10 09:36:30 字數 1320 閱讀 7704

css復合選擇器

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

交集選擇器

交集選擇器由兩個選擇器構成,其中第乙個為標籤選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,如h3.special。

記憶技巧:

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

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

並集選擇器

並集選擇器(css選擇器分組)是各個選擇器通過逗號連線而成的,任何形式的選擇器(包括標籤選擇器、class類選擇器id選擇器等),都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同,或部分相同,就可以利用並集選擇器為它們定義相同的css樣式。

記憶技巧:

並集選擇器 和 的意思, 就是說,只要逗號隔開的,所有選擇器都會執行後面樣式。

比如  .one, p , #test   表示   .one 和 p  和 #test 這三個選擇器都會執行顏色為紅色。  通常用於集體宣告。
他和他,在一起, 在一起 一起的意思

後代選擇器

後代選擇器又稱為包含選擇器,用來選擇元素或元素組的後代,其寫法就是把外層標籤寫在前面,內層標籤寫在後面,中間用空格分隔。當標籤發生巢狀時,內層標籤就成為外層標籤的後代。

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

子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標籤寫在前面,子級標籤寫在後面,中間跟乙個 進行連線,注意,符號左右兩側各保留乙個空格。

白話: 這裡的子 指的是 親兒子 不包含孫子 重孫子之類。

比如:  .demo > h3    說明  h3 一定是demo 親兒子。  demo 元素包含著h3。
在不修改以上**的前提下,完成以下任務:

鏈結 登入 的顏色為紅色,同時主導航欄裡面的所有的鏈結改為橙色 (簡單)

主導航欄和側導航欄裡面文字都是14畫素並且是微軟雅黑。(中等)

主導航欄裡面的一級選單鏈結文字顏色為綠色。(難)

偽類選擇器

偽類選擇器用於向某些選擇器新增特殊的效果。比如給鏈結新增特殊效果, 比如可以選擇 第1個,第n個元素。

為了和我們剛才學的類選擇器相區別,  類選擇器是乙個點 比如 .demo {}   而我們的偽類 用 2個點 就是 冒號  比如  :link{}
鏈結偽類選擇器

CSS選擇器 復合選擇器

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

CSS 復合選擇器

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

CSS復合選擇器

div span 又稱包含選擇器,用來選擇元素或元素組的後代,其寫法就是把外層標籤寫在前面,內層標籤寫在後面,中間 用空格分隔。當標籤發生巢狀時,內層標籤就成為外層標籤的後代。div span 由兩個選擇器構成,第乙個選擇器是標籤選擇器 也可以是其他的選擇器 第二個選擇器是class選擇器,兩個選擇...