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

昨天看了下那本《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样式布局,像这样:

<div id="btn" class="btn"></div>

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

ID vs Class 老生常谈的选择器问题相关推荐

jQuery教程03-jQuery 元素、id、.class和*全选择器
jQuery 基础选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作. jQuery 选择器基于元素的 id.类.类型.属性.属性值等"查找"(或选择)HTM ...
javascript的id、class、元素选择器
2019独角兽企业重金招聘Python工程师标准>>> /** * 元素选择器 * @param str 传递元素的id.class.标签等传递方法跟jquery一样 * @par ...
id选择器、标签选择器、类选择器、交集选择器、并集选择器
通过id选择器获取元素点击按钮显示效果 <!DOCTYPE html> <html lang="en"> <head><meta char ...
Js原生元素选择器 _$获取id class attr 属性集合
虽然跟jQuery的实现比起来是不堪入目的.但在平时一些小项目或效果的实现中,对于js获取页面元素的操作,感觉就够用了,而不用总是依赖框架去实现一些页面的交互效果. js截图浏览器控制台 1 < ...
JQuery选择器中含有冒号的ID处理差异的分析
问题提出对于一个输入框, 如果其id中含有冒号(:),选择器使用需要有特殊写法, 例如 id为下 <input type="text" value="ddd&qu ...
CSS选择器（id选择器，包含选择器，标签名选择器，类选择器，属性选择器，通配符选择器，伪类选择器，相邻选择器，选择器的优先级，子选择器）
CSS选择器 HTML:定义网页元素 CSS:美化网页元素,控制HTML标签展示样式 CSS与HTML相结合,结合方式如下: (1)内联样式:CSS代码复用性太低,书写凌乱,不推荐,缺点就是一次只能控 ...
html ifrme 选择器,html中iframe/css样式设置，id,class选择器的使用规则等学习2019.9.2 08:00...
实例 html> 外部样式 I Love PHP中文网!from 赵桂福运行实例 » 点击 "运行实例" 按钮查看在线实例 2.内部样式:用标签实例 html> ...
HTML之id选择器、class选择器及name属性区别
最近做网站的时候,经常搞不清id.class和name之间的区别,于是就在网上搜集资料学习,整合出下面的版本,以防自己忘记的同时帮助到有需求的人. id选择器唯一标识一个元素的,只能针 ...
css选择器及float(浮动)
--------------------------选择器( css有就近原则)------------------------------- 选择器名称在css表的 ...

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

ID vs Class 老生常谈的选择器问题相关推荐

最新文章

热门文章