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+p就会选择内容为$1和$3这两个p元素，而不会选择内容为$2和$4这两个元素。其中div和p目前是标签。

当然也可以换成class，比如div+.main选择所有与div相邻的class= "ddd" 的元素：

div+.ddd上面的例子将会选择内容为$1和$4这两个元素。当然选择器中的div也可以换成class。

1.5 通用兄弟选择器CSS3

div~.ddd（IE6不支持该选择器），与兄弟选择器类似，不同的是不是选择单个兄弟，而是选择紧跟着的所有元素。如下例将 div~.c 会选择$5和$7这两个元素。使用该选择器时不应像该例子这样如此复杂，维护将会变得十分困难。该选择器应当用ul li等子元素有规律的这种列表中。

<div>

</ul>

</div>

1.6 子选择器

ul>li选择标签为ul的元素中的子元素，且这些子元素的标签为li：

ul>li将会选择其中$1、$2和$3这三个元素。而ul>.ddd则仅选择其中$1和$3这两个元素。

1.7 后代选择器

div a，其中div与a之间有个空格，其与子选择器不同的是，这个将从包含在标签为div元素中所有的元素中进行筛选，其中标签为a的元素将会筛选出来：

<div>

<ul>

</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（上述属性选择器的混合使用）