1.1 id选择器
#main{ font-size:12px; margin:0; padding:0; } 其中的#main就是id选择器，用于选择HTML页面中id = "main"（<div id="main">这里为内容</div>）的元素。在同一个页面中，只能有一个id。
1.2 class选择器
.main{ font-size:12px; margin:0; padding:0; } 其中的.main就是class选择器，用于选择HTML页面中所有class = "main"（<div class="main">这里为内容</div>）的元素。在同一个页面中，class为main的元素个数不限制。
1.3 tag选择器（标签）
div{ font-size:12px; margin:0; padding:0; } 其中的div是页面中的标签，用于选择页面所有标签为div（<div>这里为内容</div>）的元素。在同一页面中，标签的元素个数不限制。标签的种类很多，常用的有div，p，span，a，ul，li，h1等等。
1.4 兄弟选择器
div+p选择紧跟在标签为div的元素后面的元素，且标签为p的元素。前提是div和p的父元素是相等的。比如页面中存在下列html片段：
|
<div></div><p>$1</p><p>$2</p><div></div><p>$3</p><div></div><ul>$4</ul> |
div+p就会选择内容为$1和$3这两个p元素，而不会选择内容为$2和$4这两个元素。其中div和p目前是标签。
当然也可以换成class，比如div+.main选择所有与div相邻的class= "ddd" 的元素：
|
<div></div><p class="ddd">$1</p><p>$2</p><div></div><p>$3</p><div></div><ul class="ddd">$4</ul> |
div+.ddd上面的例子将会选择内容为$1和$4这两个元素。当然选择器中的div也可以换成class。
1.5 通用兄弟选择器CSS3
div~.ddd（IE6不支持该选择器），与兄弟选择器类似，不同的是不是选择单个兄弟，而是选择紧跟着的所有元素。如下例将 div~.c 会选择$5和$7这两个元素。使用该选择器时不应像该例子这样如此复杂，维护将会变得十分困难。该选择器应当用ul li等子元素有规律的这种列表中。
|
<div> <p>$1</p> <p class="c">$2</p> <div>$3</div> <p>$4</p> <div class="c">$5</div> <ul class="ddd">$6</ul> <ul class="c"> <li class="ddd"><a class="c">$7</a></li> <li><span><a>$8</a></span></li> <li class="ddd"><a class="c">$9</a></li> </ul> </div> |
1.6 子选择器
ul>li选择标签为ul的元素中的子元素，且这些子元素的标签为li：
|
<ul><li class="ddd">$1</li><li>$2</li><li class="ddd">$3</li></ul> |
ul>li将会选择其中$1、$2和$3这三个元素。而ul>.ddd则仅选择其中$1和$3这两个元素。
1.7 后代选择器
div a，其中div与a之间有个空格，其与子选择器不同的是，这个将从包含在标签为div元素中所有的元素中进行筛选，其中标签为a的元素将会筛选出来：
|
<div> <div></div> <p class="ddd"><a class="c">$1</a></p> <p><a class="c">$2</a></p> <div></div> <p><a>$3</a></p> <div><a>$4</a></div> <ul class="ddd"></ul> <ul> <li class="ddd"><a class="c">$5</a></li> <li><span><a>$6</a></span></li> <li class="ddd"><a class="c">$7</a></li> </ul> </div> |
div a将会选择上述例子中所有的a标签，而div .c将只会选择$1、$2、$5和$7这四个元素。
1.8 通配符选择器
* 将会选择所有的元素。可与相邻选择器、子选择器、后代选择器搭配使用。
1.9 群组选择器
群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开。比如：
|
#main, .main, body { margin:0; pddding:0 } |
1.10属性选择器CSS3
属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。下表对应属性选择器的各种不同的用法。
|
a[title] |
选择所有带有title属性的a |
|
a [title ='nDos'] |
选择所有title属性为'nDos'的a（必须精确匹配） |
|
a [title ~='nDos'] |
选择所有title属性中含有'nDos'字符串的a（IE6不支持） |
|
a [title ^='nDos'] |
选择所有title属性中以'nDos'字符串开始的a（IE6不支持） |
|
a [title $='nDos'] |
选择所有title属性中以'nDos'字符串结尾的a（IE6不支持） |
|
a [title *='nDos'] |
选择所有title属性中含有'nDos'字符串的a（IE6不支持） |
|
a [title |='nDos'] |
选择所有title属性中以'nDos'字符串开始的a（IE6不支持） |
|
a[title] [href] |
选择所有同时带有title和href属性的a（上述属性选择器的混合使用） |
下面通过例子来指明其中容易混淆的几个属性选择器。其中a[title]、a [title ='nDos']、a [title $='nDos'] 这三个是含义明确的。
下面看看a [title ~='nDos'] 和a [title *='nDos'] 的区别：
|
<a title="nDosGoGoGo">$1</a> <a title="nDos-GoGoGo">$2</a> <a title="nDos GoGoGo">$3</a> |
a [title ~='nDos'] 只能筛选出 $2。而a [title *='nDos'] 能够同时筛选出这两个。注意nDos与GoGoGo中间的空格。
下面看看a [title ^='nDos'] 和a [title |='nDos'] 的区别：
|
<a title="nDosGoGoGo">$1</a> <a title="nDos-GoGoGo">$2</a> <a title="nDos GoGoGo">$3</a> |
a [title ^='nDos'] 三个都会选中，而a [title |='nDos'] 仅会选中$2。注意nDos与GoGoGo中间的 - 字符。