|
|
| 剖析标注HTML元素时class比id所具有的优势 |
|
|
|
|
剖析标注HTML元素时class比id所具有的优势这篇文章主要介绍了标注HTML元素时class比id所具有的优势,id的CSS优先级比cl
ass要高,因而修改样式时在class的基础上再去构建id标注的元素会更方便,需要的朋友可以参考下?在网页中有很复杂的HTML
结构，如果我们使用CSS来定义相关的样式，就需要为这些结构指定相应的标志，然后再编写相应的CSS选择器来获取他们赋予样式。
最常用的两个标注属性就是id和class了，例如：?11.<
/p>现在还有更多的选择方法，例如：属性选择器等。但是并不推荐使用，使用属性选择器虽然可以省略掉id和class，但是存在
后期维护起来不方便、早期浏览器兼容性不好、影响浏览器的渲染效率等问题。所以，虽然有了更多的选择，我还是推荐使用id和cla
ss以及元素名来构造CSS选择器。既然id和class都可以标注HTML结构，那么我应该优先选择使用什么？这
就是本文即将讨论的。id和class的区别有经验的朋友可以略过这一部分。1.唯一性和重复可用性id在网页结构中只能是唯一的
，如果你指定了一个元素的id为aa，那么网页中就不能再出现一个id为aa的HTML元素。虽然强大的浏览器会支持多
个重复id并赋予对应样式，但这是不标准不允许的。而class相反，它可以在网页结构中重复使用，你指定了一个元素的clas
s为bb，同时可以指定下一个元素的class为bb，这两个元素可以同时被应用bb的样式。此外，你还可以为一个元素制定
多个class属性值，这样就会同时获得多个属性的样式。2.CSS中优先级不同在CSS选择器中，对id和class
的样式应用优先级不同。id的样式优先级要高于class的样式优先级，如果我对一个id为aa、class为bb的
p指定了下面的样式：CSSCode复制内容到剪贴板?121.#aa{background:red;}2..bb{backgr
ound:blue;}那么浏览器会显示成红色背景。3.跳转功能使用id属性可以增加锚标记跳转功能，如果在页面中我们对一个p
指定id为aa，那么我们在当前的URL后面加上#aa，页面将会立刻跳转到id为aa的p所在的位置。例如
：百度百科的章节跳转。而class没有这个功能。移动电玩城http://www.44226.net为什么使用class而不
是id使用class究竟有什么好处？1.减少命名为复杂的结构起名字真是一个麻烦的事情，如果我使用id来标注，那么我必须为
每一个结构起一个名字。而在网页中，有很多结构的样式和效果都是一样的（例如：统一的按钮样式），那么我们仅仅编写一个通用的class
样式，然后为所有的需要相同样式的结构赋值这个class即可。2.高度重复使用class可以重复应用在其他结构中，并且可以对
某个元素应用多个class，那么这样就可以高度重复使用某个class样式了。比较极端的实际应用就是原子类，例如：CSSC
ode复制内容到剪贴板?121..fl{float:left;display:inline;}2..fr{float:rightr
ight;display:inline;}尽可能小的简短的写出一些类，然后对于某个需要这个样式（例如：上面的浮动）的元素直接写上
class（例如：class=“fl”）。一般的应用来说，对于某些需要相同样式的结构，只编写一个样式，然后对这些结构赋值相同的
class即可，这样达到高度的样式代码重用，而且修改起来也比较方便。3.优先级低class的优先级高于元素名，低于id，
利用优先级低的这个特性可以方便调试和样式覆盖。乐淘棋牌http://www.letaoqpyx.com如果我们之前对一个元素使用了
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。棋牌评测网http://www.77884.net比较好的使用组合就是对于绝大多数的元素和结构等使用class来指定，对于极个别需求特定功能的元素使用id标注。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
