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两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择Ｆ元素。
<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
后代选择器（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
与后代选择器相比，子元素选择器（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选择器。
