简单整理关于css选择器的一些内容，
大体上直观以符号观察是：
， —— 选择器分组 . —— 类选择器 # —— ID 选择器 [] —— 属性选择器 空格 —— 后代选择器 > —— 子元素选择器 + —— 相邻兄弟选择器
一、元素选择器
选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
.e.g
p {color:gray;}
二、选择器分组 ,
用逗号分隔：逗号告诉浏览器，规则中包含两个不同的选择器。
如果没有这个逗号，那么规则的含义将完全不同，表示是后代选择器。
可以将任意多个选择器分组在一起，对此没有任何限制。
body, h2, p, table, th, td, pre, strong, em {color:gray;}
通配选择器：这个声明等价于列出了文档中所有元素的一个分组选择器。
* {color:red;}
三、类选择器 .
1、普通单一类选择器：.a {color:red;}
2、结合元素选择器 ： p.a {color:red;}
类选择器可以结合元素选择器来使用。
选择器现在会匹配 class 属性包含 a 的所有 p 元素.
3、多类选择器 :
.e.g
.a {font-weight:bold;}
.b {font-style:italic;}
.a.b {background:silver;}
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
（两个类选择器链接时中间不可有空格，class属性使用时需要有空格间隔，
即可有各个单选择器的效果，也有多类选择器结合的效果。）
.e.g
This paragraph is very important.
This is a warning.
This paragraph is a very important warning.
This is a paragraph.
...
四、ID 选择器 #id
ID 选择器类似于类选择器，但不引用 class 属性的值，而要引用 id 属性中的值.
前面有一个 # 号声明
与类选择器区别：
区别 1：只能在文档中使用一次 区别 2：不能使用 ID 词列表，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。 区别 3：ID 能包含更多含义
五、属性选择器 []
简单属性选择：如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
可以只对有 href 属性的锚（a 元素）应用
.e.g
a[href] {color:red;}
根据具体属性值选择:除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
.e.g
a[href="https://www.w3school.com.cn/"][title="W3School"] {color: red;}
六、后代选择器（又称为包含选择器。） 空格
我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。 结构：选择器之间以空格分隔，选择器之间的空格是一种结合符（combinator）。 语法解释：在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。
举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}
七、子元素选择器 >
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）
.e.g
h1 > strong {color:red;}
语法解释：如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。
八、相邻兄弟选择器 +
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
.e.g
h1 + p {margin-top:50px;}
