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普遍存在相容性問題,為了避免因相容性帶來的干擾...