CSS选择器之基本选择器+属性选择器

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中间的 - 字符。