CSS選擇器總結

2021-08-17 16:42:26 字數 2055 閱讀 1545

在css的學習中有乙個很容易讓人混亂的就是css選擇器,因為選擇器有很多種,而且在使用的時候有些類似,有些卻相差很遠。那麼本文就對css選擇器,作為乙個集中的總結梳理。(注:文中**因篇幅有限僅寫出關鍵部分**)

當id和class選擇的是同一元素的相同屬性時,顯示id的效果,如:

當多個元素有共同的css樣式描述時可以使用分組減少**,如:

#a,#b,#c

text

test

text

當要操作元素內部的子元素時可以使用巢狀來進行操作,如:

div p

name

以空格分隔,選取改元素的所有後代,其實就是巢狀的選擇的格式啦,如:

div p

name

age則name和age都會居中,選擇的只要是後代就行,可以是子元素的子元

以大於號分隔,只選取元素的直接後代,如:

div>p

name

agediv>p

name

age則只有age會居中顯示

以加號分隔,若元素有共同的父元素,則可以選擇緊接在另一元素後的元素,如:

div+h1

name

age則test的顏色會為藍色

以波浪號分隔,若元素有共同的父元素,選取所有指定元素之後的相鄰兄弟元素,如:

div~p

name

age則name和age都會被選擇變為藍色。

[屬性]使用,無論什麼屬性,該選擇器會選擇所有具有該屬性的元素,如:

則所有具有href屬性的元素都會被選擇,baidu和sina就會為綠色。

可以選擇多屬性,如:

a[href][title]

sina

選擇具體到屬性的具體屬性值,如:

則只有baidu會變綠。

也可以選擇多個屬性值,如:

可以用波浪號」~「只匹配部分進行選擇(可以想成約等於),如:

img[title~="a"]

前三行都會匹配,但是a_2不匹配(要用子串匹配屬性選擇器)。

應用在鏈結裡的偽類

a:link 

a:visited 

a:hover 

a:active 

first-child偽類

用於相文中首行設定樣式,且只應用於塊級元素,可設定的屬性有:

font

color

background

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

first-letter:

用於設定文字首個字元的樣式,且只能用於塊級元素,可設定的屬性有:

font

color

background

margin

padding

border

text-decoration

text-transform

vertical-align (僅當 float 為 none 時)

clear

line-height

float

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...

CSS總結 CSS選擇器

css3選擇器最新部分,有人也稱這種選擇器為css3結構類,下面我們通過實際的應用來具體了解他們的使用和區別,首先列出他具有的選擇方法 first child選擇某個元素的第乙個子元素 last child選擇某個元素的最後乙個子元素 nth child 選擇某個元素的乙個或多個特定的子元素 nth...

CSS選擇器總結

通用選擇器 選擇所有元素 css2 型別選擇器 element 根據型別選擇元素 css1 類選擇器 class 根據全域性屬性class的值選擇元素 css1 id選擇器 id 根據全域性屬性id的值選擇元素 css1 屬性選擇器 attr 基於屬性選擇元素 css2 attr val 選擇定義a...