剖析标注HTML元素时class比id所具有的优势


在网页中有很复杂的 HTML 结构,如果我们使用 CSS 来定义相关的样式,就需要为这些结构指定相应的标志,然后再编写相应的 CSS 选择器来获取他们赋予样式。最常用的两个标注属性就是 id 和 class 了,例如:

XML/HTML Code复制内容到剪贴板
  1. <div class=”header” id=”header” ></div>  

现在还有更多的选择方法,例如:属性选择器等。但是并不推荐使用,使用属性选择器虽然可以省略掉 id 和 class,但是存在 后期维护起来不方便、早期浏览器兼容性不好、影响浏览器的渲染效率 等问题。所以,虽然有了更多的选择,我还是推荐使用 id 和 class 以及 元素名 来构造 CSS 选择器。
既然 id 和 class 都可以标注 HTML 结构,那么我应该优先选择使用什么?这就是本文即将讨论的。

id 和 class 的区别

有经验的朋友可以略过这一部分。

1.唯一性和重复可用性

id 在网页结构中只能是唯一的,如果你指定了一个元素的 id 为 aa,那么网页中就不能再出现一个 id 为 aa 的 HTML 元素。虽然强大的浏览器会支持多个重复 id 并赋予对应样式,但这是不标准不允许的。

而 class 相反,它可以在网页结构中重复使用,你指定了一个元素的 class 为 bb,同时可以指定下一个元素的 class 为 bb,这两个元素可以同时被应用 bb 的样式。此外,你还可以为一个元素制定多个 class 属性值,这样就会同时获得多个属性的样式。

2.CSS 中优先级不同

在 CSS 选择器中,对 id 和 class 的样式应用优先级不同。id 的样式优先级要高于 class 的样式优先级,如果我对一个 id 为 aa 、class 为 bb 的 div 指定了下面的样式:

CSS Code复制内容到剪贴板
  1. #aa{background:red;}   
  2. .bb{background:blue;}  

那么浏览器会显示成红色背景。

3.跳转功能

使用 id 属性可以增加锚标记跳转功能,如果在页面中我们对一个 div 指定 id 为 aa ,那么我们在当前的 URL 后面加上 #aa ,页面将会立刻跳转到 id 为 aa 的 div 所在的位置。例如:百度百科的章节跳转。而 class 没有这个功能。


为什么使用 class 而不是 id

使用 class 究竟有什么好处?

1.减少命名

为复杂的结构起名字真是一个麻烦的事情,如果我使用 id 来标注,那么我必须为每一个结构起一个名字。而在网页中,有很多结构的样式和效果都是一样的(例如:统一的按钮样式),那么我们仅仅编写一个通用的 class 样式,然后为所有的需要相同样式的结构赋值这个 class 即可。

2.高度重复使用

class 可以重复应用在其他结构中,并且可以对某个元素应用多个 class ,那么这样就可以高度重复使用某个 class 样式了。比较极端的实际应用就是原子类,例如:

CSS Code复制内容到剪贴板
  1. .fl{float:left;display:inline;}   
  2. .fr{float:rightright;display:inline;}  

尽可能小的简短的写出一些类,然后对于某个需要这个样式(例如:上面的浮动)的元素直接写上 class (例如:class=“fl”)。
一般的应用来说,对于某些需要相同样式的结构,只编写一个样式,然后对这些结构赋值相同的 class 即可,这样达到高度的样式代码重用,而且修改起来也比较方便。

3.优先级低

class 的优先级高于 元素名,低于 id ,利用优先级低的这个特性可以方便调试和样式覆盖。

如果我们之前对一个元素使用了 id 来标注,我们想修改这个元素的样式,只能去修改对应的 CSS 样式代码或者对某样式使用 !important 强调语法来覆盖原有样式。

如果元素使用了 class 来标注,那么我们直接为元素增加一个 id ,然后构造一个元素 id 的 CSS 选择器即可进行修改覆盖。

正是因为这些特性,所以要尽量使用 class 来标注元素,方便后期维护等。

4.id 也是必须有的

class 也不是万能的,有很多地方我们必须同时使用 id 来标注。

5.锚标记跳转

要想在页面中使用锚标记来跳转,那只能指定某个跳转目标的 id ,因为 class 可以被重复多次使用,所以不具备跳转的功能。

6.用在 input 中

使用 input 的时候,通常要使用 label 标签来描述这个 input 的功能。将 label 与 input 关联的方法有两种,一种是使用 label 的 for 属性,属性值就是 input 的 id 值,另一种就是将 label 把相应的 input 包裹起来。很显然第一种比较灵活比较好,但是你必须要对相应的 input 指定一个 id 属性。

此外,有些特殊的需求,也必须使用 id ,这里不再总结了。

最佳的使用组合

之前有很多批评 class 的言论,甚至有言论说 W3C 应该废除 class 标签,潜行者m 也曾经是 id 属性的狂热使用者,但是在实践过程中,越来越发现 class 的优点并改用 class。

比较好的使用组合就是对于绝大多数的元素和结构等使用 class 来指定,对于极个别需求特定功能的元素使用 id 标注。



相关阅读:
Win10正式版哪些预装的应用可以卸载?Win10释放空间的详细教程
Win7系统双击Adminiatrator帐户提示“读取错误,工作站服务没有启动”的解决方法
JavaScript希尔排序、快速排序、归并排序算法
Android编程获取手机后台运行服务的方法
android当前apn的状态以及获取方法
C#中Html.RenderPartial与Html.RenderAction的区别分析
给before和after伪元素设置js效果的方法
MYSQL事务回滚的2个问题分析
win7更改U盘背景技巧(附代码)
浅析mysql 语句的调度优先级及改变
jQuery实现图片轮播特效代码分享
C#图像处理之图像平移的方法
win7如何获取管理员权限?win7管理员权限获取方法介绍
关于CSS选择器优先级的判断题附结果截图
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 宁波-太姥山 黄石-义乌 华蓥-新化 廊坊-池州 德阳-磁窑 烟台-聊城 陆丰-尤溪 连云港东-耒阳 宜春-亳州 新乡东-北戴河 绍兴东-宜兴 兰考-温州 辽阳-八面城 杨林-昆明 兰州西-吐鲁番北 哈克-大雁 三门峡-巢湖 宁德-永嘉 巴彦高勒-包头 安口窑-咸阳 哈尔滨-滁州北 金家店-保健 德安-麻城 阳平关-凤州 查干芒和-准沙日乌苏 杭州-蓝村 怀化南-建瓯西 泰康-乾安 焦作-月山 虢镇-唐山 郓城-鄄城 开封-永济 卫辉-天津 南昌-卫辉 敖来-四合 铁岭-巩义 深圳西-宝鸡 通北-克山 西安南-乌鲁木齐 新乡-小宋 乌兰花-赛汗塔拉 建瓯-衡水 祁县-西安 沙海-东南营子 古鲁满汗-汗苏鲁 库尔勒-柳园 杭州-平原 广州-梧州南 永安-贵定 康庄-赤峰 徐州-张家口南 安图-明城 勃利-佳木斯 唐山-洪洞 侯马-广元 白河-祁家堡 秦皇岛-吴桥 孝感北-赤壁北 鲁番-上西铺 萧县北-溧阳 莱阳-文登东 开原-鞍山 张掖西-砀山 安富镇-双凤驿 太原南-四平 潼关-兰考 泰山-东胜西 西阳村-后寨 湛江西-岳阳 临海-于都 泰山-磐石 潮阳-余姚北 融安-靖州 五龙背-刘家河 烟台-无锡东 乌尔旗汗-朝中 鹰潭-施秉 顺昌-金华 徐州-天柱山 郑州东-苏州北 大连市金州区先进街道怎么坐车
苏州有那些生产客车汽车内饰件的企业(塑料产品)
我国最长的楹联是什么
请问汕头能直飞到西昌么..如果能,机票票价多少钱如果不能是不
从宿迁的沭阳到镇江的汽车客车大概是几点的?多少钱哪?哪里可以查询?
从广州列车火车站到花都区秀全西路怎么去
丁丁网 上海 从龙华到新华路定西路乘什么车便捷谢谢
请问从沈阳(列车火车汽车都行)到吉林省松原市乌兰塔拉乡新立围
大连到杏树屯火车列车什么时候有啊
我在武汉大学读书,户口没签过来,想学车,要办居住证,需要
坐飞机从潍坊到北京多少小时
保定到霸州在哪里坐车啊?谢谢
高分关于上海火车列车站和代售点售票的问题
佛山到中山富华车站有车吗?车票票价多少钱?尾班车几点?
从唐山北列车火车站到唐山市委党校,怎么走
延吉到长春火车
拱北车站有车去龙华车站
从蚌埠南站到怀远县万福镇怎么做车啊
贵阳到昆明列车火车要好久
从黄浦区福州路上海船长青年店到上海长途汽车站(客运总站)
无锡到安徽阜阳火车要做多少小时?
我是邯郸临漳习文乡的,想买个九阳豆浆机,到哪里去买才放心
安徽巢湖和县乌江镇有道院吗
急求:绵阳吊车出租公司联系方式
从北京到山东的荣成市有无列车
从郑州汽车客车西站怎么去航海东路
嘉兴一中实验学校补课多少小时
昌平博爱医院背神经阻断术多少钱?
南京到上海要驾车多久
张家界城市里有什么推荐的地方

Copyright © 2016 phpStudy |