CSS基本选择器

id选择器

ID 选择器允许以一种独立于文档元素的方式来指定样式。ID选择器是在名称前使用“#”如(#myid)。

<div id="myid">Demo</div>

#myid {
    background: red;
    color: #fff;
}

ID选择器是CSS中效率最高的选择器。

ID选择器有几个地方是需要特别注意的，第一：一个文档中一个id选择器只允许使用一次，因为id在页面中是唯一的；第二，id选择器不能像类选择器一样多个合并使用，一个元素只能命名一个id名；第三，可以在不同的文档中使用相同的id名。

兼容性：
1. IE 6+
2. Firefox
3. Chrome
4. Safari
5. Opera

类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

基本使用方法如下：

<div class="demo">Demo</div>

将 div 的背景色设置为红色，并且将文本颜色设置为白色。

.demo {
    background: red;
    color: #fff;
}

类选择器可以结合元素选择器来使用。如：

<p class="demo">demo</p>
<h1 class="demo">demo</h1>

希望段落 p 显示为绿色文本，而为 h1 元素为蓝色文本：

p.demo {
    color: green;
}
h1.demo {
    color: blue;
}

多类选择器。如：

<p class="demo important">demo</p>

如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。

.demo.important {
    border: 1px solid #000;
}

多类选择器不被 IE6 所支持。

请注意，类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。

兼容性：
1. IE 6+
2. Firefox
3. Chrome
4. Safari
5. Opera

元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

div {
    background: red;
    border: 1px solid #000;
}

兼容性：
1. IE 6+
2. Firefox
3. Chrome
4. Safari
5. Opera

相邻兄弟选择器（E + F）

相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，E F两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择Ｆ元素。

<ul>
   <li>List item 1</li>
   <li>List item 2</li>
   <li>List item 3</li>
 </ul>

li + li {
    font-weight:bold;
}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

兼容性：
1. IE 7+
2. Firefox
3. Chrome
4. Safari
5. Opera

后代选择器（E F）

后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。比如说：E F，前面 E 为祖先元素，F 为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，请注意他们之间需要一个空格隔开。这里Ｆ不管是E元素的子元素或者是孙元素或者是更深层次的关系，都将被选中，换句话说，不论Ｆ在Ｅ中有多少层关系，都将被选中。

<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

不论 li 的嵌套层次多深。ul li 将会选择以下标记中的所有 li 元素：

ul li {
    font-weight: bold;
}

兼容性：
1. IE 6+
2. Firefox
3. Chrome
4. Safari
5. Opera

子选择器（E > F）

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

ul>li {
    border: 1px solid #000;
}

可以看到 ol 标签内的 li 元素并没有成功设置 border 属性。

兼容性：
1. IE 7+
2. Firefox
3. Chrome
4. Safari
5. Opera

通配符选择器

通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素。

* {
    margin: 0px;
    padding: 0px;
}

上述代码所表示的是：将所有元素的 margin 和 padding 都设置为0，是最基本的清除浏览器默认 CSS 样式的方法。

选择某个元素下的所有元素：

#demo * {
    background: red;
}

兼容性：
1. IE 6+
2. Firefox
3. Chrome
4. Safari
5. Opera

该选择符并不推荐使用，因为它是性能最低的一个CSS选择器。