1. 元素选择器(element selector) 通过HTML元素的标签名来选择元素,如p、h1、div等。 例子:p {color: blue;}
2. 类选择器(class selector) 通过HTML元素的class属性来选择元素,class属性值必须以“.”开头。 例子:.red {color: red;}
3. id选择器(id selector) 通过HTML元素的id属性来选择元素,id属性值必须以“#”开头。 例子:#header {font-size: 24px;}
4. 属性选择器(attribute selector) 通过HTML元素的属性名、属性值或者属性值的包含、前缀、后缀进行选择。 例子:[href="http://www.example.com"] {text-decoration: none;}
5. 子元素选择器(child selector) 选择元素的直接子元素,用“>”符号表示。 例子:ul >li {list-style: none;}
6. 后代选择器(descendant selector) 选择元素的所有后代元素,用空格表示。 例子:body p {font-family: Arial;}
7. 相邻兄弟选择器(adjacent sibling selector) 选择某个元素后面紧跟着的第一个兄弟元素,用“+”符号表示。 例子:h1 + p {text-transform: uppercase;}
8. 通用选择器(universal selector) 选择所有的HTML元素,用“*”符号表示。 例子:* {margin: 0; padding: 0;}
通过灵活的使用这些选择器,可以针对不同的HTML元素添加特定的样式,实现网页的各种效果。