css常用的选择器及优先级关系

 分类:div+css教程时间:2015-11-01 14:59:15点击:

      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选择器

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: