该不该使用ID选择器?浅谈对CSS的ID选择器的使用建议

所属分类: 网页制作 / CSS 阅读数: 1795
收藏 0 赞 0 分享

关于ID选择器
和class选择器不同,这里使用#
class的值不同标签可以发生重复。但是id不允许!!!
id选择器不能结合使用
id属性通常和js配合使用

CSS Code复制内容到剪贴板
  1. #label {   
  2.     background-colorred;   
  3. }  

思考
最近我在对 CSS 的样式进行一些性能测试,然后我的一些好友问我:为什么你不使用 IDs 来作为页面上一些特定的内容部分呢?
这个问题很难回答,有下面几个理由:
1.页面中的该元素无法重用
2.螺旋式下降导致的特异性
3.通过 IDs 用来标识一些非常特殊的内容,但牺牲了抽象性
4.性能方面可通过其他方式来解决
5.下面我们针对这四点进行深入探讨。

无法重用页面的元素
IDs 对程序员来说相当于是单例,一个页面中不允许存在两个相同的 id(当然浏览器不会报错就是了),这就意味着你不可能重用某个元素,相当于是一对一的关系。而根据我的速度测试,如果一段 CSS 代码只对一个元素起作用对速度并不利,同时也带来了 CSS 膨胀的额外开销。

由螺旋式下降导致的特异性
CSS 关于重载的两个方法:
1.级联: (任何下一级的元素都可以重写上一级CSS规则)
2.特异性: the idea of creating weight by using weighted selectors.
为什么我说这里是一个螺旋式下降,因为为了要重载一个优先级很高的规则,我必须给它设置添加再高的优先级。

CSS Code复制内容到剪贴板
  1. .ModuleOfficeList .property-checkbox input {display:block;margin-bottom:8px;_border:0px !important;}    
  2. .ModuleOfficeList .property-checkbox,   
  3. .ModuleOfficeList .new-icon,   
  4. .ModuleOfficeList .open-icon {display:block}    
  5. ....uid-officelistings .property-checkbox {display:none !important; }  

上面是我在 2005 年的一段真实的代码,上面的代码我必须在最后使用 !important 规则来对选择器规则进行重新排序。这很不好。一旦我们这样做......它需要我们更多的时间去追捕父ID,我们将推翻当前的特异性。这是不友好的而且不利于维护,最终你会掉进入自己挖好的洞,只有重构才能摆脱这个噩梦。

另一方面:
我听到少数的一些声音关于使用 ID 选择器的好

使用 ID 选择器更快
是的,这一点的确没错,而且我也曾经证明过。但是性能的表现微乎其微,但当你使用嵌套其他选择器时性能就下降了:

CSS Code复制内容到剪贴板
  1. #profile-module {...}    
  2. #profile-module li {...}    
  3. .profile-module li {...}  

第二个选择器就没有第三个来的快,因为CSS是从右到左的,因此 li 会先被扫描,因此通过 ID 进行定位将直接被忽略。
关于 CSS 选择器的性能问题,请看 Steve Souders explains how selector speed works.

IDs 就是单例的意思
很多人会在页面中定义 ID ,但某个元素在所有页面中只出现一次的话,用 ID 选择器是没问题的。我唯一声明的是所有代码都应该是可重用的,如果能避免还是尽量避免。

特别说明
最后需要说明的是,我并不是要大家完全抛弃使用 ID,ID 可以加速 JavaScript 执行,在文档中传达具体的意义。
我只是不建议在 CSS 中使用 ID 选择器,当然,决定权在于你自己。

更多精彩内容其他人还在看

CSS3实现背景透明文字不透明的示例代码

这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈CSS中的尺寸单位

这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好,移动端基本是清一色的webkit,经常会用到css的不同尺寸/长度单位,这里做个整理。感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

CSS中有些属性的前面会加上“*”或“_”所代表的意思

这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS 设置滚动条样式的实例代码

这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)

这篇文章主要介绍了纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

纯css实现多级折叠菜单折叠树效果

这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果,运用checkbox的checked值来判断下级栏目是否展开,通过css3选择器提供的checked伪类来实现此效果,感兴趣的朋友参考下吧
收藏 0 赞 0 分享

CSS Grid 网格布局全解析

这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

css flex 弹性布局详解

这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS3 二级导航菜单的制作的示例

这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用css禁用input、checkbox、select等html控件实现disable效果

这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多