目录
一、基础选择器
下列语法都以内部样式表为例~
1、标签选择器
语法：
<style>
标签名 {
样式声明；
}
</style>
特点：
能够快速选择同一类型的标签，但是不能差异化选择。
举例：
2、类选择器
语法：
<style>
.类名 {
样式声明；
}
</style>
特点：
可以差异化表示不同的标签~
举例：
注意：
(1) 类名前有个点 .
(2) 通过标签的class属性来调用对应的标签；
(3) 一个类可以被多个标签使用，一个标签也可以有多个类名，这样可以把多个标签的共性提取出来，达到简化代码的效果；
(4) 类名如果比较长，可以用-来分割；
(5) 不要使用纯数字、中文、标签名来命名类名。
3、id选择器
语法：
<style>
#id {
样式声明；
}
</style>
和类选择器使用方式类似，但一个html文件中的id必须都是唯一的。
特点：每次选择一个标签~
举例：
注意：
(1) id选择器是#开头，而类选择器是.开头；
(2) 一个html中的id必须是唯一的，不能被多个标签使用。
4、通配符选择器
语法：
<style>
* {
样式声明；
}
</style>
特点：选择所有的标签~
举例：
5、总结
| 选择器 | 作用 | 特点 |
| 标签选择器 | 可以选出所有的同种标签 | 不能差异化选择 |
| 类选择器 | 可以选出一个或者多个标签 | 可以差异化选择，最灵活、最常用的基础选择器 |
| id选择器 | 可以选出一个标签 | 可以选择一个指定的标签，同一个html中每个id都是唯一的 |
| 通配符选择器 | 可以选择所有标签 | 特殊情况使用 |
二、复合选择器
1、后代选择器
又叫包含选择器，可以选择某个父元素中的后代元素(子元素、孙子元素……)~
语法：
<style>
父标签 子标签 {
样式声明；
}
</style>
举例：修改ol中的li不影响ul中的li
举例：修改ol的孙子标签h3，不影响ol的儿子标签
注意：标签也可以换成类名或id名。
2、子选择器
和后代选择器类似，但是只能选择亲儿子标签~
语法：
<style>
父标签>子标签 {
样式声明；
}
</style>
举例：修改div中的儿子标签a
反例：修改div中的孙子标签b，此时不会产生任何效果。
注意：子选择器只能选择子标签，无法选择孙子及其后代标签。
3、并集选择器
用于选择多组标签~
语法：
<style>
元素1，元素2，元素3 {
样式声明；
}
</style>
注意：
(1) 用逗号分割多个元素；
(2) 任何基础选择器都可以使用并集选择器；
(3) 并集选择器建议竖着写，每个选择器占一行。
举例：把div，ol，ul中的内容都改为tomato色
4、伪类选择器
语法：
标签名:link 选择未被访问过的链接
标签名:visited 选择已经被访问过的链接
标签名:hover 选择鼠标指针悬停上的链接
标签名:active 选择活动链接(鼠标点击链接但是并未松开鼠标)
举例：
①正常情况：
②鼠标放在“周公瑾”上面：
③鼠标点击“周公瑾”：
CSS常用元素属性参考：CSS 参考手册 (w3school.com.cn)
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
已为社区贡献2条内容
