主要参考
基本选择器
Type 选择器
element { style properties }
Class 选择器
.class_name { style properties }
ID 选择器
#id_value { style properties }
通用选择器
* { style properties }
(不建议使用,影响网页性能)
属性选择器
用法 | 描述 |
---|---|
[attr] | 表示带有以 attr 命名的属性的元素 |
[attr=value] | 表示带有以 attr 命名的属性,且值为“value”的元素 |
[attr~=value] | 表示带有以 attr 命名的属性,且值列表(以空格风格)包含“value”的元素 |
[attr | =value] |
[attr^=value] | 表示带有以 attr 命名的属性,且值是以“value”开头的元素 |
[attr$=value] | 表示带有以 attr 命名的属性,且值是以“value”结尾的元素 |
[attr*=value] | 表示带有以 attr 命名的属性,且值中包含“value”的元素 |
组合选择器
子选择器
selector1 > selector2 { style properties }
selector2
是selector1
的直接子元素后代选择器
selector1 selector2 { style properties }
selector2
是selector1
的后代元素,但(对比子选择器)不需要具有严格的父子关系紧邻兄弟选择器
former_element + target_element { style properties }
target_element
是紧跟在former_element
之后的同级元素一般兄弟选择器
former_element ~ target_element { style properties }
target_element
是位于former_element
之后的同级元素,但(对比紧邻兄弟选择器)不需要严格紧随