ID vs Class 老生常谈的选择器问题

Bowman_han 发布于2019-08-21 10:45 / 3320人阅读

摘要：昨天看了下那本秘籍在关于选择器一章中提到应该尽量避免使用选择器这我就纳闷了以前似乎没太注意书中的理由是选择器权重太高缺乏灵活性并且引用了一篇文章来阐述原因原文地址这里直接用原文中作者的原文地址来讨论下作者的意思是在页脚使用定义好链接颜色后将

昨天看了下那本《CSS3秘籍》, 在关于CSS选择器一章中提到应该尽量避免使用ID选择器, 这我就纳闷了, 以前似乎没太注意, 书中的理由是ID选择器权重太高, 缺乏灵活性, 并且引用了一篇文章来阐述原因(原文地址:When using IDs can be a pain in the class...) 这里直接用原文中作者的DEMO原文DEMO地址来讨论下,作者的意思是在页脚使用.twitter a 定义好链接颜色后,将该链接加入到页眉上时会由于页眉使用了ID选择器而受到干扰

Let’s imagine you’re building a site and one of the requirements is to have a reusable Twitter widget that needs to be placable wherever the client chooses. Let’s for example say they want to kick things off with having the widget in the header and also in-page, at the bottom of an article. The Twitter widget’s styling must remain consistent.

以下是demo的截图:

这篇文章有一定道理, 在CSS布局时确实存在这个问题, 也不便于扩展,但是ID选择器在JS中确是最快的, 因为JS查找ID元素时一经找到就停止查找,而查找类元素则组要遍历整个DOM, 这个问题在stackoverflow的讨论(id vs class selection benchmark) 基于css布局与js性能的考虑, 我觉得是否可以在涉及js操作的DOM节点尽可能地使用ID 选择器, 而在CSS布局上尽量避免, 比如一个HTML元素上既写ID又写Class ,ID用于JS操作, class用于css样式布局,像这样:

另外直接放个选择器的测试网站,里面有包括jq,yui等框架选择器的测试Speed/validity selectors test for frameworks.

GPU云服务器云服务器 ID选择器 jsp中id选择器 vs2008的问题选择包含class

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86122.html

css&html面试知识点

摘要：第二等代表选择器，如，权值为。接收端收到后，回传一个带有标志的数据包以示传达确认信息。第四次挥手主动关闭方收到后，发送一个给被动关闭方，确认序号为收到序号，至此，完成四次挥手。 CSS优先级算法参考：http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...

Bamboy 2019-08-29 16:58 评论0 收藏0
css&html面试知识点

摘要：第二等代表选择器，如，权值为。接收端收到后，回传一个带有标志的数据包以示传达确认信息。第四次挥手主动关闭方收到后，发送一个给被动关闭方，确认序号为收到序号，至此，完成四次挥手。 CSS优先级算法参考：http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...

JeOam 2019-08-02 11:42 评论0 收藏0
jQuery最佳实践

摘要：链式操作使用链式操作代替变量缓存和多次操作每当链长超过个链接或得到，因为活动任务的复杂，使用适当的换行和缩进使代码的可读性。对于较长的链式操作可以把对象缓存到一个变量里。原文地址：http://lab.abhinayrathore.com/jquery-standards/ 第一次翻译，有不对不妥的地方请拍砖。showImg(http://segmentfault.com/img/b...

wizChen 2019-08-21 12:13 评论0 收藏0
前端面试题2（CSS）

摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。前端面试之CSS display: none; 与 visibility: hidden; 的区别联系：它们都能让元素不可见区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任...

MangoGoing 2019-08-29 15:30 评论0 收藏0
前端面试题2（CSS）

摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。前端面试之CSS display: none; 与 visibility: hidden; 的区别联系：它们都能让元素不可见区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任...

zorro 2019-08-22 17:30 评论0 收藏0