基本选择器

ID 和 class 选择器

ID 和 class 选择器都可以将样式接入到文档上。但是就添加样式而言，两者有重要的区别。

首先，ID 只能作用于页面的一个元素，而 class 可以在页面元素中重用。还有一些其他区别会在后续说明。

命名很简单也很重要，给属性起名可以看出一个开发员是否具有经验。假设给一个列表起名，向下面这样可以简单又明确：

<ul class="product-list">
  <li><a href="/product/1">Product1</a></li>
  <li><a href="/product/2">Product2</a></li>
  <li><a href="/product/3">Product3</a></li>
</ul>

这里的 product-list 意味着它是一个商品列表，只要是商品列表都可以使用这个样式。

还有一点很重要，给元素添加类名时，即使类名明确用于某个样式，也不要取诸如 large-centered-list 这样的名字。这个也在后续说明。

ID

ID 被推荐用来给特定模块添加样式。比如主要商品列表，因为一个页面中通常只有一个主要商品列表。就可以写成下面这样：

<ul id="primary-product-list" class="product-list">
  <li><a href="/product/1">Product1</a></li>
  <li><a href="/product/2">Product2</a></li>
  <li><a href="/product/3">Product3</a></li>
</ul>

因为它有同样的 class 属性而获得一样的样式，又可以基于 id 添加额外的样式。不过实际开发不建议用 id 来引入样式。

元素选择器（又名：类型选择器）

可以选定特定类型的元素，比如段落或标题元素：

p {
}

后代选择器（又名：包含选择器）

选择某个或某组的后代。用空格隔开：

blockquote p {
  padding-left: 2em;
}

优先级

ID 选择器：100

类选择器、伪类选择器：10

元素选择器：1

通配选择器：0

优先级相同时，后者覆盖前者。

高级选择器

子选择器

子选择器与后代选择器不同的地方是它只会选择直接子后代，孙代及以后都不会被选择。

下面这个例子里，只有 Home、Services、Contact 会被选择。a,b 并不会被选择。

#nav > li {
  background: url(folder.png) no-repeat left top;
  padding-left: 20px;
}

<ul id="nav">
  <li><a>Home</a></li>
  <li>
    <a>Services</a>
    <ul>
      <li>a</li>
      <li>b</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>

相邻同辈选择器

它可以选择位于某个元素后面，并于该元素拥有共同父级元素的元素。下面的例子中，只有 bbb 会变色，ccc 不会变色。

h2 + p {
  color: #777;
}

<h2>abc</h2>
<p>bbb</p>
<p>ccc</p>

子选择器和相邻同辈选择器，合起来还被称为组合子（combinator）。

一般同辈组合子

还有一个类似的组合子，叫一般同辈组合子:~。只是它和+的不同是，它会选择 h2 后的所有元素。比如上面那个例子改成下面这样，就会选取所有段落。

h2 ~ p {
  color: #777;
}

<h2>abc</h2>
<p>bbb</p>
<p>ccc</p>

通用选择器

选择一切

* {
}