持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章css属性-字体相关中，我们学习了css属性-字体相关的知识点，包括font-weight、font-style、font-variant、line-height、font等等相关知识点。今天，在这篇文章中，我们将学习CSS选择器，包括通用选择器、简单选择器、属性选择器、后代选择器、兄弟选择器、选择器组 – 交集选择器等相关知识点。
CSS选择器
我们在开发中经常需要找到特定的网页元素进行设置样式，那么如何找到特定的那个元素呢？我们这就需要使用CSS选择器。
什么是CSS选择器？就是按照一定的规则选出符合条件的元素，为之添加CSS样式。
选择器的种类繁多，大概可以这么归类：
- 通用选择器
- 元素选择器
- 类选择器
- id选择器
- 属性选择器
- 组合
- 伪类
- 伪元素
通用选择器
通用选择器所有的元素都会被选中。一般用来给所有元素作一些通用性的设置，比如内边距、外边距或者重置一些内容。通用选择器效率比较低，尽量不要使用。
简单选择器
简单选择器是开发中用的最多的选择器，包括元素选择器、类选择器和id选择器。
元素选择器，使用元素的名称，比如div {color: red}。
类选择器， 使用 .类名，比如.box {color: red}。
id选择器, 使用 #id，比如#main {color: red}。
使用id时需要注意，一个HTML文档里面的id值是唯一的，不能重复。id值如果由多个单词组成，单词之间可以用中划线-（连字符）、下划线_连接，也可以使用驼峰标识，最好不要用标签名作为id值。
属性选择器
拥有某一个属性 [att]，属性等于某个值 [att=val]。
后代选择器
后代选择器一: 所有的后代(直接/间接的后代)。选择器之间以空格分割。
后代选择器二: 直接子代选择器(必须是直接自带)。选择器之间以 > 分割。
兄弟选择器
兄弟选择器一:相邻兄弟选择器。使用符号 + 连接。
兄弟选择器二: 普遍兄弟选择器 ~ 使用符号 ~ 连接。
选择器组 – 交集选择器
交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)。在开发中通常为了精准的选择某一个元素。
并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)。在开发中通常为了给多个元素设置相同的样式。
