一、选择器的种类
1. 标签、类和ID选择器
- 标签选择器，如：
h1 { } - 类选择器，如：
.box { } - ID选择器，如：
#unique { } - 全局选择器，也叫通配选择器，由一个星号（
*）代指，它选中了文档中的所有内容（或者是父元素中的所有内容，比如，它紧随在其他元素以及邻代运算符之后的时候）。
2. 标签属性选择器
- 存否和值选择器，它允许基于一个元素自身是否存在（例如href）或者基于各式不同的按属性值的匹配，来选取元素。如：
a[title]。 - 子字符串匹配选择器，它让更高级的属性的值的子字符串的匹配变得可行。例如，如果你有
box-warning和box-error类，想把开头为“box-”字符串的每个物件都匹配上的话，你可以用[class^="box-"]来把它们两个都选中。
3. 伪类与伪元素，如：a:hover { }
4. 关系选择器
-
后代选择器，典型用单个空格（ ）字符——组合两个选择器，比如，第二个选择器匹配的元素被选择，如果他们有一个祖先元素匹配第一个选择器。选择器利用后代组合符被称作后代选择器。如：body article p { }
-
子代关系选择器，子代关系选择器是个大于号（
>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。如：article > p -
邻接兄弟，邻接兄弟选择器（
+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随<p>元素之后的<img>元素：p + img -
通用兄弟，如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（
~）。要选中所有的<p>元素后任何地方的<img>元素，我们会这样做：p ~ img
二、选择器优先级
- ID 选择器 >类选择器 > 标签选择器
- 给元素添加的内联样式 (例如，
style="font-weight:bold") 总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级。 - 通配选择符（
*）、关系选择符（+,>,~, ' ',||）和 否定伪类（:not()）对优先级没有影响。（:not否定伪类在优先级计算中不会被看作是伪类。事实上，在计算选择器数量时还是会把其中的选择器当做普通选择器进行计数。但是，在:not()内部声明的选择器会影响优先级）。 !important，当在一个样式声明中使用一个!important规则时，此声明将覆盖任何其他声明。!important与优先级无关，但它与最终的结果直接相关。使用!important是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。
参考资料：CSS选择器
