学习 CSS 的两大要点

[yshaojun]

CSS 并不是编程语言，它是一门 DSL，与编程语言最大的不同是没有逻辑控制语句，但是表达效率高，几行就能实现一个效果。初学者常常因为庞大的属性集合望而却步，但实际上只要花点时间掌握 选择器 和 层叠规则 这两大要点，写起 CSS 来就会自信很多。

选择器

写 CSS 首先要正确的选取到 HTML 中的元素，以下是基本的 CSS 选择器。

1. ID 选择器，用 # 表示：

<style>
  #id0 {
    color: green;
  }
</style>

<div id="id0">test</div>

2. 类选择器，用 . 表示：

<style>
  .cls0 {
    color: green;
  }
</style>

<div class="cls0">test</div>

3. 元素选择器，直接写标签：

<style>
  div {
    color: green;
  }
</style>

<div>test</div>

4. 属性选择器，用 [] 表示：

<style>
  [title=test] {
    color: green;
  }
</style>

<div title="test">test</div>

5. 通用选择器，用 * 表示：

<style>
  * {
    color: green;
  }
</style>

<div>test</div>

6. 伪类选择器，用 : 表示，下面例子的意思是鼠标悬浮再 div 时文字变为绿色：

<style>
  #id0:hover {
    color: green;
  }
</style>

<div id="id0">test</div>

7. 伪元素选择器，用 :: 表示：

<style>
  #id0::after {
    content: 'after';
    color: green;
  }
</style>

<div id="id0">test</div>

8. 子元素选择器，用 > 隔开：

<style>
  #id0 > div {
    color: green;
  }
</style>

<div id="id0">
  <div>test</div>
</div>

9. 后代元素选择器，用 空格 隔开：

<style>
  #id0 div {
    color: green;
  }
</style>

<div id="id0">
  <div>test</div>
</div>

10. 相邻兄弟选择器，用 + 隔开：

<style>
  #id0 + div {
    color: green;
  }
</style>

<div id="id0">test0</div>

<!-- 下面的文字颜色被设置成绿色 -->
<div>test</div>

层叠规则

CSS 的层递规则是按 特殊性（specificity） 决定的，不同的选择器的特殊性有如下规定（摘录自《CSS 权威指南》第三版）：

• 对于选择器中给定的各个 ID 属性值，加 0, 1, 0, 0。
• 对于选择器中给定的各个类属性值、属性选择或伪类，加 0, 0, 1, 0。
• 对于选择器中给定的各个元素和伪元素，加 0, 0, 0, 1。
• 结合符和通配选择器对特殊性没有任何贡献（实际相当于加 0, 0, 0, 0 -- 本人注）。

另：

• 每个内联声明的特殊性都是 1, 0, 0, 0。

对同一元素上的同一规则按上述特殊性规则进行计算，特殊性高的胜出（左边数字大于右边）。

以上是 非重要声明 的规则，由特殊性决定，但是如果出现 重要声明，即 !important，则重要声明胜出。

如果以上都相同，则 位置靠后的胜出。

掌握了 CSS 的这两大要点，然后去记忆一些常用的属性比如 margin/border/padding/color 等，学习 CSS 的道路将会顺畅许多。

[yshaojun]

最近才发现 + 只能选择 相邻 兄弟，那选择不相邻的兄弟元素怎么办呢？

11. 兄弟元素选择器，用 ~ 隔开：

<style>
  #id0 ～ p {
    color: green;
  }
</style>

<div id="id0">test0</div>
<div>test</div>

<!-- 下面的文字颜色被设置成绿色 -->
<p>test1</p>