CSS选择器详解
本文介绍了CSS中的基础选择器和复合选择器，包括标签选择器、类选择器、ID选择器等基础选择器，以及后代选择器、子选择器、并集选择器和伪类选择器等复合选择器。
目录
CSS 选择器
在 CSS 中，可以支持多种不同风格的选择器，通过选择器的搭配使用， 可以确定任意想要操作的元素。选择器就是高精度定位器，有了它我们就能实现指哪打哪的效果。
由于 CSS 选择器种类众多，这里就介绍最为常用的两大类，以满足基本开发需求。
1. 基础选择器
基础选择器是由单个选择器构成，主要有：标签选择器，类选择器，id 选择器，通配符选择器。
（1）标签选择器
标签选择器是选中一类标签，如果我们选中 <a> 标签，就会让当前页面所有 <a> 标签都带上同样的样式，可认为是特定标签的 aoe，是一种较为简单粗暴的选择方式。
来看一下效果：
（2）类选择器
有的时候我们只想修改特定的元素，这个时候就可以使用类选择器。我们可以在 CSS 中创建一个类，通过这个类来手动指定哪些标签要遵守预期样式。
假设我们有四个 <li> 都是紫色，我希望其中一个变为橘色，就可以让其中一个 <li> 的类属性不同：
需要注意的是，一个类可以应用多个标签，一个标签也可以使用多个类。接下来我通过代码示例让多个 <li> 都是 "special" 类，让一个 <li> 可以使用多个类（多个类之间用空格分离）：
（3）id 选择器
id 选择器和类选择器类似，不过 id 值在 html 中是唯一的（有些像数据库中的primary key），并且 id 选择器以 # 开头。我们可以通过 id 选择器来完成上面的示例：
还是可以发现由于 id 的唯一性，有的属性值发生了赘余，所以类选择器比 id 选择器更加常用。
（4）通配符选择器
通配符选择器是以 * 开头的选择器，会选取所有的标签。这个一般用于样式的擦除。我们知道 超链接标签是带有下划线并且字体颜色是蓝色的，通过通配符选择器我们就能擦除原有的样式。
2. 复合选择器
复合选择器是将基础选择器进行了一些组合，来达到更加精准且高效的选择。今天笔者要介绍的有：后代选择器，子选择器，并集选择器，伪类选择器。
（1）后代选择器
其方式是先指定父元素，再去指定子元素。这里的子元素不一定要是父子关系，也可以是爷孙关系，总之只要是子关系即可。接下来通过后代选择器来选定 <ul> 的 <li> 标签，而 <ol> 的 <li> 标签不选定
后代选择器也可以结合类选择器：
（2）子选择器
和后代选择器非常类似，不过子选择器只能选择子标签，至于孙子、曾孙子之类，不可以选中，父子标签通过 > 相连。接下来通过子选择器来完成上面的示例：
（3）并集选择器
通过并集选择器可以一次选择多个标签。语法是通过逗号来分隔相关元素，这是一种样式更为简化的写法。来看示例：
如果还想让汽车、自行车的大小也为 40 px，就可以组合使用并集选择器和子选择器：
（4）伪类选择器
伪类选择器有非常多种种类，这里介绍较为常用的：
（4.1）链接伪类选择器
链接伪类选择器是搭配 a 标签使用的，会根据 a 标签的状态来选择。
a 标签的状态有：
- link : 未被访问
- visited : 已经被访问过
- hover : 鼠标悬停
- active : 活动链接（点下去未松开）
接下来通过伪类选择器对上述四种状态都进行演示：
访问前效果：
悬停效果：（由于是黄色，不明显，我打开浏览器的黑夜模式进行查看）
活动链接效果：
访问后效果：
有意思的是 hover 和 active 选择器还能作用于别的标签，就拿 input 标签来说，我们让悬停为红色，点击之后为蓝色：
（4.2）force 伪类选择器
表示获取焦点的时候被选中。凡是带有图像化界面，都涉及焦点的概念，我们使用电脑时，程序窗口常常带有一个输入框，针对输入框，我们就需要知道那个输入框获取到了焦点，即我们键盘的输入是针对此输入框。示例：有四个输入框，我们在获得焦点的输入框输入时，文本颜色变为红色。
这是没有任何选中的状态：
当我尝试选中第一个文本输入框：
小总结
对于 CSS 的选择器知识，单看一个知识点其实非常容易理解，其难度在于组合的使用。也许你会觉得靠死记硬背能提高 CSS 的水平，其实通过代码的练习最为直接有效。就像一堆乐高积木，其难度并不是记住哪些模块是什么形状，二十通过各种积木的拼接、组合、搭建，我们能组建期望的建组，能塑造精致的人物，记住搭建的步骤固然重要，但是更有价值的经验一定在搭建过程中获得，即实践出真知。
扫一扫
7258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
