HTML之CSS選擇器

2021-10-09 03:26:35 字數 1326 閱讀 2933

基礎選擇器

基礎選擇符就是id,標籤,類選擇符

復合選擇器

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

交集選擇器

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

記憶技巧:交集選擇器是並且的意思。 即…又…的意思

比如:p.one選擇的是類名為.one的段落標籤。

並集選擇器

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

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

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

後代選擇器

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

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

子元素選擇器

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

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

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

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

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

鏈結偽類選擇器

1.:link /* 未訪問的鏈結 /

2.:visited / 已訪問的鏈結 /

3.:hover / 滑鼠移動到鏈結上 /

4.:active / 選定的鏈結 */

注意寫的時候,他們的順序盡量不要顛倒,按照lvha 的順序。

a 

a:hover

html 選擇器之屬性選擇器

屬性選擇器的主要作用個人的理解就是對帶有指定屬性的元素設定css樣式。使用css3的屬性選擇器,可以指定元素的某個屬性,也可以指定某個屬性和這個屬性所對應的值。css3的屬性選擇器主要包括下面幾種 e attr 只使用屬性名,但沒有確定任何屬性值 e attr value 指定屬性名,並指定了該屬性...

html 選擇器之基礎選擇器

我把css選擇器分開成三部分,第一部分是我們常用的部分,我把他叫做基本選擇器 第二部分我把他稱作是屬性選擇器,第三部分我把他稱作偽類選擇器 一 基礎選擇器 1.萬用字元 選中所有的元素 2.元素選擇器 e 乙個元素作為乙個選擇器,div,ul,dd,span等等 3 類選擇器 class 定義cla...

JQuery選擇器之CSS選擇器

語法描述 選擇所有元素 選擇特定型別的元素 選擇具有特定class的元素 選擇具有特定class的某類元素 id 選擇具有特定id屬性值的元素 語法描述 attr 選取定義了attr屬性的元素,即使這個屬性值為空 attr val 選擇attr屬性值等於字串val的元素 attr val 選擇att...