CSS基礎 復合選擇器

2021-10-05 11:25:10 字數 1406 閱讀 8030

在css中,可以根據選擇器的型別把選擇器分為基礎選擇器和復合選擇器,復合選擇器是建立在基礎選擇器之上,對基本選擇器進行組合形成的

復合選擇器可以更準確、更高效的選擇目標元素(標籤)

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

常用的復合選擇器包括:

後代選擇器又稱為包含選擇器,可以選擇父親元素裡面的子元素,其寫法就是把外層標籤寫在前面,內部標籤寫在後面,中間用空格分隔,當標籤發生巢狀是,內層標籤就稱為外層標籤的後代

語法

元素1 元素2

上述語法表示選擇元素1裡面的所有元素2(後代元素)

例如:

ul li

選擇 ul 裡面所有的li標籤元素

子選擇器(子選擇器)只能選擇作為某元素的最近一級子元素可以理解為親兒子

語法:

元素1>元素2

上述語法表示選擇元素1裡面的所有直接後代兄弟元素2

例如:

div>p

選擇div裡面所有便簽中最近一級標籤 p 標籤元素

並集選擇器可以選擇多組標籤,同時為他們定義相同的樣式,通常用於集體宣告

並集選擇器是各個選擇器通過逗號,連線而成的,任何形式的選擇器都可以作為並集選擇器的一部分

語法:

元素1,元素2

上述語法表示選擇元素1和元素2

例如:

ul,div

選擇ul和div標籤

偽類選擇器用於向某些選擇器新增特殊的處理效果,比如給鏈結新增特殊效果,或者選擇第乙個,第n個元素

偽類選擇器的書寫的最大特點是用冒號 : 表示,比如:hover:first-child

表示方法

表示含義

a:link

選擇所有未被訪問的鏈結

a:visited

選擇所有已被訪問的鏈結

a:hover

選擇滑鼠指標位於其上的鏈結

a:active

選擇活動鏈結(滑鼠按下未彈起的鏈結)

注意:

用於獲得焦點的表單元素

焦點就是游標,一般情況下類表單元素才能獲取,因為這個選擇器也主要針對於表單元素來說

input:focus

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