css3選擇器歸類整理 基本選擇器和屬性選擇器

2022-06-05 12:09:09 字數 1208 閱讀 9745

css3選擇器分類

css3選擇器分類如下圖所示

選擇器的語法

1.基本選擇器

型別**

功能描述

通配選擇器

*選擇文件中所有html元素

元素選擇器

body

選擇指定型別的html元素

類選擇器

.list

選擇指定class屬性值為「class」的

任意型別的任意多個元素

id選擇器

#list

選擇指定id屬性值為「id」的任意型別元素

後代選擇器

.list li

選擇作為某元素後代的元素。

基本選擇器擴充套件

型別**

功能描述

子元素選擇器

#wrap > .inner.

也可稱為直接後代選擇器,

此類選擇器只能匹配到直接後代,

不能匹配到深層次的後代元素

相鄰兄弟選擇器

#wrap #first+.inner

它只會匹配緊跟著的兄弟元素

通用兄弟選擇器

#wrap #first ~ div

它會匹配所有的兄弟元素(不需要緊跟)

選擇器分組

h1,h2,h3

此處的逗號我們稱之為結合符

2.屬性選擇器

(1)存在和值屬性選擇器

選擇器功能描述

[attribute=value]

用於選取帶有指定屬性和值的元素。

[attribute~=value]

用於選取屬性值中包含指定詞彙的元素。

[attribute]

用於選取帶有指定屬性的元素。

(2)子串值屬性選擇器

選擇器功能描述

[attr|=val]

用於選取帶有以指定值開頭的屬性值的元素。

[attribute^=value]

匹配屬性值以指定值開頭的每個元素。

[attribute$=value]

匹配屬性值以指定值結尾的每個元素。

[attribute*=value]

匹配屬性值中包含指定值的每個元素。

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

css3 基本選擇器

css3 之前的基本選擇器 萬用字元選擇器 元素選擇器 類選擇器 id選擇器 後代選擇器。css3 新增基本選擇器 子元素選擇器 相鄰兄弟元素選擇器 通用兄弟選擇器 群組選擇器 子元素選擇器 只能選擇某元素的子元素 不包含所有後代,至選擇下一代 父元素 子元素 相鄰兄弟元素選擇器 可以選擇在乙個元素...

css3 選擇器 CSS3選擇器詳解

css3在css2基礎上,增強或新增了許多特性,彌補了css2的眾多不足之處,使得web開發變得更為高效和便捷。比如說,同樣是乙個頭像,可能在低版本的瀏覽器中,頭像方的 在高版本的瀏覽器中,頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題,為了避免因相容性帶來的干擾...