基本选择器
-
通配符选择器
-
元素选择器
-
类选择器
-
ID选择器
-
后代选择器
-
子元素选择器
-
相邻兄弟选择器
-
通用兄弟选择器
-
群组选择器
前五个请参考CSS基础知识点--选择器
子元素选择器
概念
子元素选择器只能选择某元素的子元素
语法格式
父元素 > 子元素(father > child)
相邻兄弟选择器
概念
相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素
语法格式
元素 + 兄弟相邻元素(Element + Sibling)
通用兄弟选择器
概念
选择某元素后面的所有兄弟元素,而且他们具有一个相同的父元素
语法格式
元素 ~ 后面所有兄弟相邻元素(Element ~ Sibling)
群组选择器
概念
群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号","隔开
语法格式
元素1,元素2,...,元素n(Element1,Element2,...,Element3)
属性选择器
对带有制定属性的 HTML 元素设置样式
使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值
Element[attribute]
概念
选择所有带有 attribute 属性元素
Element[attribute~="value"]
概念
选择 attribute 属性有单词"value"的所有元素(属性不止一个属性值,其中一个属性值为"value")
注意:该属性选择器用于选取属性值中包含指定词汇的元素,只要是指定的属性,并且属性值列表中包含value,而不是在某个值中以value开头或结尾
Element[attribute^="value"]
概念
选择 attribute 属性值以"value"开头的所有元素
注意:该属性选择器匹配指定属性的指定value值开头的元素,如果class中有多个value值,第一个值中的第一个字母不是指定的值,即使后面的属性中首字母是指定的值,那么也不能匹配上
Element[attribute$="value"]
概念
选择 attribute 属性值以"value"结尾的所有元素
Element[attribute*="value"]
概念
选择 attribute 属性值包含"value"的所有元素(属性值中的单词包含)
Element[attribute|="value"]
概念
选择 attribute 属性值为"value"或以"value"开头的元素
属性选择器 | 作用 | |
---|---|---|
Element[attribute ] |
选择所有带有 attribute 属性元素 | |
Element[attribute~="value" ] |
选择 attribute 属性有单词"value"的所有元素(属性不止一个属性值,其中一个属性值为"value") | |
Element[attribute^="value" ] |
选择 attribute 属性值以"value"开头的所有元素 | |
Element[attribute$="value" ] |
选择 attribute 属性值以"value"结尾的所有元素 | |
Element[attribute*="value" ] |
选择 attribute 属性值包含"value"的所有元素(属性值中的单词包含) | |
Element[`attribute | ="value"`] | 选择 attribute 属性值为"value"或以"value-"开头的元素 |
网友评论