css选择器

层叠：

优先级的准确规则如下：

1： 如果选择器的 ID 数量更多，则它会胜出（即它更明确）。
2： 如果 ID 数量一致，那么拥有最多类的选择器胜出。
3 ：如果以上两次比较都一致，那么拥有最多标签名的选择器胜出。
4： 源码顺序层叠的第三步，也是最后一步，是源码顺序。如果两个声明的来源和优先级相同，其中一个声明在样式表中出现较晚，或者位于页面较晚引入的样式表中，则该声明胜出。

说明 伪类选择器（如:hover）和属性选择器（如[type=“input”]）与一个类选择器的优先级相同。通用选择器（ *）和组合器（ >、 +、 ~）对优先级没有影响。

---

层叠值：

浏览器遵循三个步骤，即来源、优先级、源码顺序，来解析网页上每个元素的每个属性。如果一个声明在层叠中“胜出”，它就被称作一个层叠值

---

经验法则：

不要使用ID选择器

很多时候开发人员使用 ID 选择器，却不知道它会创建更高的优先级，之后就很难覆盖它。如果要覆盖一个 ID 选择器的样式，就必须要用另一个 ID 选择器。

不要使用!important

它比 ID 更难覆盖，一旦用了它，想要覆盖原先的声明，就需要再加上一个!important，而且依然要处理优先级的问题。

通常最好让优先级尽可能低

在大型项目中这一点尤为突出。通常最好让优先级尽可能低，这样当需要覆盖一些样式时，才能有选择空间。

---

关于重要性的一个重要提醒

当创建一个用于分发的 JavaScript 模块（比如 NPM 包）时，强烈建议尽量不要在 JavaScript里使用行内样式。如果这样做了，就是在强迫使用该包的开发人员要么全盘接受包里的样式，要么给每个想修改的属性加上!important。正确的做法是在包里包含一个样式表。如果组件需要频繁修改样式，通常最好用 JavaScript给元素添加或者移除类。这样用户就可以在使用这份样式表的同时，在不引入优先级竞赛的前提下，按照自己的喜好选择编辑其中的样式。

---

继承：

不是所有的属性都能被继承。默认情况下，只有特定的一些属性能被继承，通常是我们
希望被继承的那些。它们主要是跟文本相关的属性： color、 font、 font-family、 font-size、font-weight、 font-variant、 font-style、 line-height、 letter-spacing、 text-align、text-indent、 text-transform、 white-space 以及 word-spacing。
还有一些其他的属性也可以被继承，比如列表属性： list-style、 list-style-type、list-style-position 以及 list-style-image。表格的边框属性 border-collapse 和border-spacing 也能被继承。注意，这些属性控制的是表格的边框行为，而不是常用于指定非表格元素边框的属性。（恐怕没人希望将一个

的边框传递到每一个后代元素。）以上为不完全枚举，但是已经很详尽。

---

特殊值：

有两个特殊值可以赋给任意属性，用于控制层叠： inherit 和 initial。我们来看看这两个特殊值

使用inherit关键字

有时，我们想用继承代替一个层叠值。这时候可以用 inherit 关键字。可以用它来覆盖另一个值，这样该元素就会继承其父元素的值。

使用initial关键字

有时，你需要撤销作用于某个元素的样式。这可以用 initial 关键字来实现。每一个 CSS属性都有初始（默认）值。如果将 initial 值赋给某个属性，那么就会有效地将其重置为默认值，这种操作相当于硬复位了该值。图 1-11 展示了给页脚链接赋以 initial 而不是 inherit时的效果。

不要混淆 initial 和 auto 值。

auto 不是所有属性的默认值，对很多属性来说甚至不是合法的值。比如border-width: auto 和 padding: auto 是非法的，因此不会生效。可以花点时间研究一下这些属性的初始值，不过使用 initial 更简单。

---

简写属性会默默覆盖其他样式

大多数简写属性可以省略一些值，只指定我们关注的值。但是要知道，这样做仍然会设置省略的值，即它们会被隐式地设置为初始值。这会默默覆盖在其他地方定义的样式。比如，如果给网页标题使用简写属性 font 时，省略 font-weight，那么字体粗细就会被设置为 normal。

---

例子：

有导航栏，页脚