您当前所在位置： >
> Web后端开发
CSS中的选择符实际使用技巧
大家知道CSS中的选择符实际使用吗?下面我们就给大家详细介绍一下吧!我们积累了一些经验，在此拿出来与大家分享下，请大家互相指正。css选择符将确定后面的属性定义要作用到哪些元素,因此存在一个浏览器根据css选择符来应用样式到对应元素的匹配过程。关于浏览器的样式匹配系统，David Hyatt在Writing Efficient CSS for use in the Mozilla UI一文中提到了以下内容：
The style system matches a rule by starting with the rightmost selector and moving to the left through the rule&s selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch.
意思是说，浏览器引擎在样式匹配时，以从右向左的顺序进行。在具体匹配某一条样式规则时，这个从右向左的过程会一直持续，直到读取完整个选择符序列并完成匹配，或因某一个地方的不匹配而取消(然后转到另一条样式规则)。
至于为什么浏览器会选择这样的匹配顺序，你可以看看Stack Overflow上的相关讨论。大致上解释一下的话，由于最右边的关键选择符直接表示了样式定义应作用的元素，所以从右向左的顺序更利于浏览器在初始匹配的时候就确定有样式定义的元素集合，并更快地在找某一个元素的样式时避开大多数实际没有作用到的选择符。
更好的css选择符，是让浏览器在样式匹配过程中减少匹配查询次数，以更快的速度完成样式匹配，从而优化前端性能。这其中，也必须参考浏览器的对于样式从右向左的匹配顺序。
css选择符的正确使用方式
更特定，更具体的关键选择符
关键选择符是浏览器引擎在样式匹配时最先读取到的部分，因此，如果你在某一条样式规则中使用更特定、具体的选择符，可以帮助减少浏览器的查找匹配次数。
比如说下边这样的选择符：
CSS Code复制内容到剪贴板
.content .note span{}
最后一个span是关键选择符，而span这个标签，在网页中使用是非常多的。浏览器从span开始读取选择符，就可能会为因此在样式匹配上做了一些额外工作。
如果你确定只是想为具体处于那一个位置的span元素定义样式，更好的做法是为span命名class，比如命名为span.note_text，然后简单写为：
CSS Code复制内容到剪贴板
.note_text{}
使用class选择符
class选择符(类选择符)是最利于性能优化的选择符。相对于class，ID的缺点是只允许定义给一个元素，无法重用。而此外，它在使用上没有任何比class更好的地方。很多时候，你很难确定某一个元素是否是唯一的。另外，使用class来定义样式，而保留ID给javascript，一直是一个较好的实践。如果可以，不使用ID来定义样式。
而相对于class，标签在html中的重复性要更大，因此同样可能让浏览器在样式匹配时做更多的额外工作。如果可以，除css样式清零(reset)外，不使用标签选择符(也叫元素选择符)。
缩短选择符序列
继承写法(准确地说，这里指css关系选择符中的包含选择符)是css中很常用的写法。继承写法的初衷是，如果有两个元素，都是同样的标签或有相同的class命名，加入父元素的选择符组成选择符序列，就可以避免在不需要的时候两个元素的样式互相影响。比如.confirm_layer .submit_btn就是指，class名为submit_btn，且有一个class名为confirm_layer的父元素的元素，才应用样式。
但是，避免元素样式相互影响，并不代表可以随意地使用继承选择符。前面提到，浏览器会从右向左读取整个选择符序列，直到读取完毕并匹配完成，或者因不匹配而取消。因此，短的选择符序列更有利于浏览器更快地完成匹配过程。相对的，冗长的选择符序列则认为是低效的，比如：
CSS Code复制内容到剪贴板
.header ul li .nav_link{}
建议写为：
CSS Code复制内容到剪贴板
.header .nav_link{}
一般来说，不超过3层的继承层级就可以满足实际中的开发要求。因此，应减少不必要的继承层级，使用更短的选择符序列。
此外，较长的选择符序列还有一个问题。有较长选择符的样式规则，css优先级的计算值也较大，因此，如果在以后需要写新的样式来覆盖掉它，就需要写更长的选择符(或者使用ID)以获得更高的css优先级。这对性能和代码可读性都是不利的。
避免链式选择符
链式选择符(Chaining selectors)是对单个元素同时写了多个选择符判定的情况。比如p.name是指class名为name，且标签是p的元素，才应用样式。这些判定组合可以是ID选择符，标签选择符，class选择符的任意组合。
但是，链式选择符是过度定义(over qualified)的，不利于重用，也不利于性能优化。如:
CSS Code复制内容到剪贴板
a#author{}
建议写为：
CSS Code复制内容到剪贴板
这里的a是不必要的。一个ID只对应一个元素，没有必要再强调这个元素的标签是什么(同理，class也不必)。另外有：
CSS Code复制内容到剪贴板
.content span.arrow{}
建议写为：
CSS Code复制内容到剪贴板
.content .arrow{}
这里的span.arrow中的span也是不必要的。一方面，这为浏览器在样式匹配时增加了一项额外工作：检查class名为arrow的元素的标签名是不是span，也因此降低了性能。另一方面，如果去掉了这个限定，.arrow的样式定义，就可以用在更多的元素上，也就有着更好的重用性。否则，就还得告诉别人，使用这个的时候只能用在span标签上。
同理，多个class的链式写法，如
CSS Code复制内容到剪贴板
.tips.succuss{}
建议更改命名，写为：
CSS Code复制内容到剪贴板
.tips_succuss{}
这样可以帮助浏览器减少额外的样式匹配工作。
此外，IE6还存在一个链式选择符的问题，多个class选择符写在一起时，例如.class1.class2.class3，正常情况是只有同时有这全部的class的元素，才应用样式。但IE6只认最后一个，也就是符合.class3这个选择符的元素，就应用样式。
前面所述的选择符的写法的建议，只是从浏览器渲染性能优化，及代码的重用性方面分析得到的理论结果。在实际使用中，你并不需要严格按照这些内容来做。例如，如果你确实是准备为class名为intro的元素内的所有a标签元素都加上某样式，那么.intro a这样的选择符是明智的。
关于高效的css选择符的指南，你还可以阅读google developer中的Use efficient CSS selectors。
如今，现代浏览器在样式匹配上也逐渐有了更多的优化(参考CSS Selector Performance has changed!)，有些方面的内容我们已经不再需要再担心了。但是，这并不意味着不需要考虑写合理的css选择符了。css选择符性能优化是依然存在的事，你的选择符应该更好地体现你的意图，而不是随心所欲地使用。更重要的是，以这样一种稍细腻的，经过思考的想法来写css选择符，并不是一件困难的事。只要你想，形成这样的一种习惯，你就可以自然地在这方面做得更好，何乐而不为呢?
相信大家已经学会CSS中的选择符实际使用吧!感谢大家对我们网站的支持!
相关推荐：
上一篇：下一篇：
本文相关阅读
高校查询分数线
考生所在地
北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
地区批次线查询
考生所在地
北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
科目理科文科综合其他
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
院校所在地北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
其它中央部委
类型工科农业师范民族
层次本科高职(专科)
高考志愿③部曲
频道热门推荐
栏目最新更新我想知道为什么一个css文件中ID选择器可以定义这么多次？_web前端开发吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：42,080贴子：
我想知道为什么一个css文件中ID选择器可以定义这么多次？收藏
web前端开发学习,选择达内web前端培训,学习html5/CSS3/JavaScript/JQuery等前端技术;互联网+时代,企业需要大量精通web前端开发的技术人才,成为web前端开发工程师,成就高薪
css里id选择器没有次数限制，而且这里并没有多次使用id选择器，你看见的这个id选择器只是选择器的父级，不是选择器本身
不是只选了一次吗
后面的选择器加了类名
继续学下去就知道。给同一个id的目的是给定命名空间。方便维护和防止子元素命名重复，等做模块化设计的时候你就知道好处了。还早着呢
整个文档相同id只能定义一次，上面那么多次是调用，表示选择这个 lol
整个文档相同id只能定义一次，上面那么多次是调用，表示我这些样式是给这个id下的某个子级设定的，你后面会学到这种选择器的
只定义了一次
其实这个是不符合规范的，一般情况下，css不允许不允许使用id选择器。样式一律用class
这个不是 定义。
web前端开发,选甲骨文oracle人才培训基地,世界500强,原厂IT师资面授,轻松入名企,月薪过万,先就业后付款.web前端开发?世界500强名师面授.点击咨询&&
你选择的他下面的节点
大兄弟你这理解突破天际啊
这个是写样式，可以重复使用。其实在HTML里面只定义了一ID为header的类名
这里是在style里的，不是定义，这里是做选择的，所谓选择就是你将要描述的标签进行定位
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或1090人阅读
jquery（34）
虽然经常用
今天用这个去选的时候，发现怎么都设置不上&#20540;
id选择器是选择页面内全部的对象中的第一个
问题就在这------------因为以前项目里面没有说对这个弹出框做什么操作，所有id重复了也没管。
需要注意：
id选择器选择的是所有里面的一个，(虽然,也是返回在一个数组里面)
而类选择器选择的是一个数组。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：456043次
积分：6846
积分：6846
排名：第2854名
原创：253篇
转载：77篇
评论：202条
交流群：好像不需要吧 我扣扣： 我邮箱： 我&#26684;言：&习惯就好&坑了多少人
暂时在：帝都 曾工作：成都 曾工作：郑州 我爱好：海&#36156;王 我爱好：英雄杀 我家乡：济源市 我爱好：写bug 求求求：有问题就留言吧 为啥呢：大师兄是一直在维护的
(3)(22)(16)(11)(13)(31)(34)(31)(54)(14)(27)(4)(3)(16)(16)(11)(5)(7)(4)(5)(6)(3)ID选择器在一个中只能使用一次！但是如果既有一个ID选择器，还有一个ID的嵌套选择器，比如＃one和
p #one，这两人个选择器可以同时使用吗？
<a href="/b/.html" title="<formmethod="post"na...
应该可以使用，但这样用的意义不大。
除非是class
p #.one{...}
/*适用于class为one的p元素*/
其他答案（共1个回答）
select top 10 * from
where id not in
(select top 30 id from Table)
我还看到过很多 &#034;LV_&#034; 这种，估计是个人爱好吧，也有可能是站队
buyid=&#034;;
dim pro_mor
pro_mor=&#034;0&#034;
buylist = &#034;&#039;&#034;&buyid&&#034;+&#034;&p...
大家还关注
确定举报此问题
举报原因(必选)：
广告或垃圾信息
激进时政或意识形态话题
不雅词句或人身攻击
侵犯他人隐私
其它违法和不良信息
报告，这不是个问题
报告原因(必选)：
这不是个问题
这个问题分类似乎错了
这个不是我熟悉的地区