CSS选择器
CSS 选择器规定了 CSS 规则会被应用到哪些元素上。以下简单介绍几种常用的选择器。
1. 分组选择器
分组选择器可以说是基本选择器的一种变体。以把多个选择器组合在一起的方式，把同一个style应用给不同的对象。不同元素之间必须有逗号连接。比如我们有标签<h1>、<h2>、<h3>，那么可以通过
1 | h1, h2, h3{ |
的方式，把CSS应用给三个元素。如果在写完这条规则后，又想单独设置其中一条元素，比如想单独设置h3的样式，那么只要再为h3写一条规则既可。
1 | h1, h2, h3{ |
2. 上下文选择器
上下文选择器，也叫后代组合式选择器，其格式如下：
1 | 标签1 标签2 {声明} |
其中标签2是我们想应用css的元素，只有当标签1是标签2的祖先元素时，该css才会生效。
上下文选择器用空格，分组选择器用逗号，两者需注意不要弄混。
使用vue会经常用到上下文选择器，因为用vue写css格式时，style标签里一般会有个属性叫scoped，相当于给当前的CSS样式加了一个作用域，表示只作用于当前组件。但是有的时候我们要修改组件中组件的样式，这时候就可能会删掉scoped。删掉之后该组件的样式就可能又被应用到调用它的父组件那里去了。这时候我们就要用上下文选择器，在我们本身的标签之前再加一个该组件里其祖先元素的标签，比如这个组件的主div的class，那么该样式就不会溢出了。
在上下文选择器中，还有几种特殊的选择符。
1. 子选择符 >
1 | 标签1 > 标签2 |
该选择符表示标签1必须是标签2的父元素，不可以是祖先元素。
2. 紧邻同胞选择符 +
1 | 标签1 + 标签2 |
该选择符表示标签2和标签1是同级元素，同时标签2必须紧跟在标签1后面。
3. 一般同胞选择符 ~
1 | 标签1 ~ 标签2 |
该选择符表示标签2和标签1是同级元素，标签2必须跟在标签的1后面，但是不一定是紧跟。
4. 通用选择符
*表示一个通配符，它匹配任何元素。
1 | *{color:green;} |
形如这样的规则会匹配所有的元素。
在使用*的时候一般会这样使用：
1 | p * {color:red;} |
这样会把p包含的所有元素的文本都变成红色。
同时*还可以被用来构成非子选择符。
1 | p * a {font-size:1.3em;} |
这样所有是p的孙子元素，但是不是p的子元素的a标签都会被选中。
3. 类选择器
类选择符大家都用得多了，基本格式我就不介绍了。不过也不是没啥可说的。最近看的书《CSS设计指南》里说，
每个类名分别用一个HTML class的做法是常见的错误，正确的做法啊是只用一个class属性，但给它设定多个值。
这样就要用到多类选择器。给元素添加多个类的写法是
1 | class="specialtext featured" |
多类选择器的写法是
1 | .specialtext.featured{ |
注意两个类名之间应该是没有空格的，不然就变成祖先与后代关系的上下文选择器了。
书里还说前端工程师在开发的过程中，要避免类泛滥的情况。就是不要像使用id一样，给每个类指定不同的类名，然后再为每个类编写规则。如果你有这种随意使用类的习惯，说明你还不了解继承和上下文选择器的作用，那么你可能会给每个标签都重复写同样的样式（比如为页面内很多标签分别指定相同的字体）。实际上应该用继承和上下文选择器让不同的标签共享样式，从而降低需要编写和维护的CSS量。
继承是啥？CSS中的祖先元素会像后代元素传递CSS的值，就像子孙继承祖先的遗产一样。一般来说颜色、字体、字号可以继承，边框、内外边距不能继承。
4. ID选择器
ID选择器的格式也没啥好讲的。ID的用处实在页面中唯一地标识一个特定的元素。
5. 属性选择器
属性选择器分为属性名选择器和属性值选择器，可以让我们基于HTML标签的属性选择元素。
属性名选择器的用法为
1 | 标签名[属性名]{ |
表示选择标签中带有对应属性的元素进行CSS渲染。
属性值选择器的用法为
1 | 标签名[属性名="属性值"]{ |
表示选择标签中带有对应属性且属性值和给出的属性值相匹配的元素进行渲染。
6. 伪类选择器
伪类之所以叫伪类是因为它与类相似，但是类不像它会附加到其他的标签上。伪类分为UI伪类和结构化伪类。UI伪类会在HTML元素处于某个状态时为该元素应用CSS样式（比如hover）。结构化伪类会在标签存在某种结构化关系时应用CSS样式（比如这个元素是一组元素中的最后一个）。
一个冒号表示伪类，两个冒号表示CSS3新增的伪元素。书上建议都采取两个冒号的写法，因为认为单冒号的伪类可能会被伪元素淘汰掉。但我看网上又不是这么说的，仁者见仁智者见智吧。
7. 伪元素
伪元素相当于伪造了一个元素，然后添加相应效果。而伪类没有添加元素，只是给元素添加样式。
