css类选择器（css选择器策略）

css（样式层叠表）是一种样式语言，能使html的表现的更加完美。css使我们的工作变的更加有趣，同时也让我们增加了许多头疼的事!现在在这里重点讲一下css的常用的选择器和它的优先级关系，以及它们的优先级算法。我决定把它们放在这里，方便以后工作使用时可以查看，希望对其他网友也是起到用处的，毕竟选择器是制作网页效果的第一步基础中的基础。

一、基本选择器：

1. * 通用元素选择器，匹配任何元素

2. E 标签选择器（也称为：html选择器），匹配所有使用E标签的元素

3. .info class选择器，匹配所有class属性中包含info的元素

4. #footer id选择器，匹配所有id属性等于footer的元素

例子如下：

* { margin:0; padding:0; }

p { font-size:2em; }

.info { background:#ff0; }

p.info { background:#ff0; }

p.info.error { color:#900; font-weight:bold; }

#info { background:#ff0; }

p#info { background:#ff0; }

二、多元素的组合选择器

1. E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔

2. E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔

3. E > F 子元素选择器，匹配所有E元素的子元素F

4. E +

F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

例子如下： div p { color:#f00; } #nav li {

display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } p

+ p { color:#f00; }

选择器的优先级是怎么规定的?一般的，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级。比如上例当中

.polaris span {color:red;}的选择器优先级是 10 + 1 也就是11;而 .polaris 的优先级是10;浏览器自然会显示红色的字。

注意事项：对于什么情况下使用什么选择器?用不同选择器的原则是：第一：准确的选到要控制的标签;第二：使用最合理优先级的选择器;第三：HTML和CSS代码尽量简洁美观。通常：

1.最常用的选择器是类选择器;

2.li、td、dd等经常大量连续出现，并且样式相同或者相类似的标签，我们采用类选择器跟标签名选择器结合的后代选择器 .xx

li/td/dd {} 的方式选择;

3.极少的情况下会用ID选择器，当然很多前端开发人员喜欢header，footer，banner，conntent设置成ID选择器的，因为相同的样式在一个页面里不可能有第二次。

总结：优先级关系id选择器>类选择器>html选择器

除注明外的文章,均为来源:汤久生博客(QQ:1917843637),转载请保留本文地址！