奔跑的akuan03：选择器

组合器和选择器组

虽然一次使用一个选择器就很有用，但在某些情形中却可能效率低下。 CSS选择器在你开始组合他们进行细粒度选择的时候变得更具使用价值。基于元素之间的相互关联关系，CSS提供了几种方法来对元素进行选择。下表使用连接符展示了这些关联关系(A和B代表前文所述的任意选择器):（CSS中选择器使用规则说明）

Combinators	Select
A,B	匹配满足A（和/或）B的任意元素（参见下方 同一规则集上的多个选择器）.
A B	匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
A > B	匹配任意元素，满足条件：B是A的直接子节点
A + B	匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
A ~ B	匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着

各种选择器的优先级

根据规则来：

1. 重要性（Importance）
2. 专用性（Specificity）
3. 源代码次序（Source order）

2.专用型：（这个很有意思，在css中将各个标签的专用值计算一下，相互竞争的样式之间比较一下就能比较出结果）

 

/* specificity: 0101 */
#outer a {
  background-color: red;
}

/* specificity: 0201 */
#outer #inner a {
  background-color: blue;
}

一个选择器具有的专用性的量是用四种不同的值（或组件）来衡量的，它们可以被认为是千位，百位，十位和个位——在四个列中的四个简单数字：

1. 千位：如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。
2. 百位：在整个选择器中每包含一个ID选择器就在该列中加1分。
3. 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
4. 个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。

3.源代码次序：如果前两个因素都一样，那么靠先后顺序决定。后面的规则覆盖前面的规则

p {
  color: blue;
}

/* This rule will win over the first one */
p {
  color: red;
}

所有这些都发生在属性级别上——属性覆盖其他属性，但你不会让整个规则凌驾于其他规则之上。
当多个CSS规则匹配相同的元素时，它们都被应用到该元素中。只有在这之后，任何相互冲突的属性才会被评估，以确定哪种风格会战胜其他类型。即有冲突的相同属性规则才需要评估，其他都是一股脑加上去的 。