最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

10. id和class的区别

HTML语言学习 林雍岷 202浏览

ID和类是“挂钩”的!

我们需要描述HTML/XHTML文档中内容,如<h1>,<p>和<ul>这类基本元素通常可以完成这项工作,但是我们的基本HTML标签并未涵盖页面元素或布局中所有可能类型。因此我们需要ID和类,例如<ul id =”nav”>,让我们有机会专门定位此无序列表,以便我们可以对页面上的其它无序列表进行唯一操作。或者我们页面上的某个部分可能没有相关标签来对其进行标记,例如页脚,我们可能会在其中执行以下操作:<div id =”footer”>。 或者我们也许在侧边栏中有一些框,用于以某种方式将那里的内容分隔开:<div class =”sidebar-box”>。

这些ID和Class是我们需要添加到标记中才能使用它们。CSS需要这些以便我们可以构建选择器并进行样式设计,但是其它Web语言(如JavaScript)也依赖它们, 然而ID和Class之间有什么区别?

ID是唯一的

  • 每个元素只能有一个ID
  • 每个页面只能有一个具有该ID的元素

第一次学习这些东西时,一遍又一遍地说ID只使用一次,但是类你可以一遍又一遍地使用。基本上很多人是一个耳朵进一个耳朵出,因为听起来更像是一个“经验法则”,而不是非常重要的知识点。如果你是一个纯HTML/CSS的人,这种情况可能会持续下去,因为对你来说,ID似乎没有任何特别。

如果你在多个元素上使用相同的ID,你的代码将不会通过验证。验证对我们所有人都非常重要,这一项就很重要,我们将继续学习ID是唯一性的更多原因。

类不是唯一的

  • 你可以在多个元素上使用相同的类
  • 你可以在同一元素上使用多个类

任何需要应用于页面上多个对象的样式信息都应使用一个类来完成。以包含多个“widgets”的页面为例:

<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>

你可以将类名“ widget”编写样式,将相同的样式应用于其它元素,如果你需要其中一个元素比另一个大,又要使用widget类的所有属性,该怎么办? 你可以这样操作:

<div class="widget"></div>
<div class="widget big"></div>
<div class="widget"></div>

只需在class属性中直接应用新类“big”即可,用空格分隔,大多数浏览器都支持任意数量的类(实际上数千个,远远超出你的需要)。

浏览器没有任何默认的ID或Class

默认情况下,向元素添加类名或ID对该元素无任何作用。你正在一个站点上工作,并且发现应用特定的类名可以解决你遇到的问题。如果你跳到另一个有相同问题的站点,尝试使用相同的类名对其进行修复,以为该类名属性很神奇,却发现它不起作用。类和ID本身没有任何样式信息,它们需要CSS来定位它们并应用样式。

ID具有特殊的浏览器功能

类在浏览器中没有特殊功能,但是ID确实有一个非常重要的窍门。这是URL中的“哈希值”。如果你有一个类似http://yourdomain.com#comments的URL,浏览器将尝试找到ID为“comments”的元素,并自动滚动页面显示该元素。在此需要特别注意的是浏览器将滚动显示该元素所需的任何元素,如果你在常规正文中执行了一些特殊操作(例如可滚动的DIV区域),该div也会被滚动。

这就是ID绝对唯一重要的原因,ID拥有绝对唯一很重要。这样你的浏览器就知道在哪里滚动!

同一个元素可以同时使用ID和类

没有任何阻止你在一个元素上同时使用ID和Class。实际上这通常是一个非常好的实践方法,以WordPress评论列表项目的默认代码为例:

<li id="comment-27299" class="item">

它具有一个你可能想要在页面上设置所有评论样式的类,但是它还具有唯一的ID值(由WordPress动态生成)。此ID值对于直接链接很有用,可以轻松地直接链接到特定页面上的特定评论。

CSS不在乎ID和Class

关于CSS,使用ID不能做的事,使用Class亦不能做,反之亦然。我记得当我第一次学习CSS时遇到问题,有时我会尝试通过切换ID和Class的值来进行故障排除,其实CSS不在乎是ID还是Class。

JavaScript在乎ID和Class

JavaScript程序员可能已经在类和ID之间的差异上更趋于一致。 JavaScript取决于只有一个具有任何特定ID的页面元素,否则,常用的getElementById函数将不可靠。 对于熟悉jQuery的人知道在页面元素中添加和删除类非常容易,因为jQuery程序内置函数。请注意对于ID而言不存在这样的函数。

不需要就不要用ID和Class

类和ID非常重要,我们每天都依靠它们来进行所需的样式和页面操作,但是我们使用的时候应该明智正确使用 。

<a href="https://www.linyongmin.com" class="link">linyongmin.com</a>

我们已经知道这个元素是一个链接,它是一个锚元素! 这里没有特别需要应用类,因为我们可以应用其标签样式。

此外,还要避免这样的:

<div id="right-col">

这里要适当使用ID,因为页面可能只有一个右列,但名称不合适。尝试并描述元素的上下文,而不是描述元素的位置或外观,这里ID使用“sidebar” 更合适。

微格式只是特定的类名

微格式只是常规标记,它们使用标准化的类名来获取所包含的信息,下面是标准电子名片:

<div class="vcard">
  <a class="fn org url" href="http://www.jiexi-it.com/">捷西网络</a>
  <div class="adr">
    <span class="type">工作</span>:
    <div class="street-address">启明路818号4-32号</div>
    <span class="locality">鄞州区</span>,  
    <abbr class="region" title="California">宁波市</abbr>  
    <span class="postal-code">315500</span>
    <div class="country-name">中国</div>
  </div>
  <div class="tel">
   <span class="type">电话</span> +86-574-8818-6347
  </div>
  <div class="tel">
    <span class="type">传真</span> +86-574-8818-6346
  </div>
  <div>邮箱: 
   <span class="email">[email protected]</span>
  </div>
</div>

转载请注明:林雍岷 » 10. id和class的区别