CSS 選擇器彙總

2022-06-17 10:06:10 字數 1065 閱讀 4142

css中的選擇器

選擇器:通過選擇器,可以選擇頁面中的指定元素

元素選擇器:

作用:根據標籤名稱來選中指定的元素

語法:標籤名稱

例子:p ;  h1 ;  div 

id選擇器:

作用:根據id名稱來選中指定的元素

語法:#id屬性值

例子:類選擇器:

作用:根據類名來選中指定的元素

語法:.class屬性值

※乙個標籤裡可以包含多個class,看style內誰在上面

例子:交集選擇器

作用:選中同時符合多個條件的元素

語法:選擇器1 選擇器2 選擇器3 選擇器n

注意點:交集選擇器中如果有元素選擇器,必須使用元素選擇器開頭

並集選擇器

作用:同時選擇多個選擇器對應的元素

語法:選擇器1,選擇器2,選擇器3,選擇器n

例如:#b1,.p1,h1,span,div.red

子元素選擇器

作用:選中指定父元素內的指定子元素

用法:父元素 > 子元素

後代元素選擇器

作用:選中指定元素內的指定後代元素

用法:祖先元素 後代元素

兄弟元素選擇器

選擇下乙個指定兄弟

用法:前乙個兄弟元素 + 後乙個兄弟元素

例子:div + span (僅在div後的第乙個兄弟span生效)

選擇下邊所有指定兄弟

用法:兄元素 ~ 弟元素

例子:div ~ span (div後的所有兄弟span生效)

用法:[屬性名] 選擇含有指定屬性的元素

[屬性名 = 屬性值] 選擇含有指定屬性和屬性值的元素

[屬性名 ^= 屬性值] 選擇屬性值以指定值開頭的元素

[屬性名 $= 屬性值] 選擇屬性值以指定值結尾的元素

[屬性名 *= 屬性值] 選擇屬性值中含有某值的元素

例子:p[title]

p[title = abc]

p[title ^= abc]

p[title $= abc]

p[title *= abc]

css選擇器彙總

在熟練掌握了class id 標籤 選擇器必須掌握,隨著css3的到來,作為一名前端,還需要掌握以下30種選擇器。1.萬用字元選擇器 選擇器是選擇頁面上的全部元素,上面的 作用是把全部元素的margin和padding設為0,最基本的清除預設css樣式 方法 選擇器也可以應用到子選擇器中,例如下面的...

css選擇器 CSS選擇器總結

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

CSS選擇器 復合選擇器

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