8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

id 和 class 有什么区别?

Porcupine Andrew 2月前

85 0

有什么区别

说到 CSS?可以使用
我看到不同的开发人员用这两种方式来做这件事,而且...

<div class=""> <div id=""> 什么区别 <div id="">

我看到不同的开发人员用这两种方式来做这件事,而且由于我是自学的,所以我从来没有真正弄明白。

帖子版权声明 1、本帖标题:id 和 class 有什么区别?
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Porcupine Andrew在本站《class》版块原创发布, 转载请注明出处!
最新回复 (0)
  • ids 必须是唯一的,而 as class 可以应用于很多东西。在 CSS 中, id s 看起来像 #elementID class 元素看起来像 .someClass

    一般来说, id 当你想指代某个特定元素,并且 class 有许多东西都相似时,就使用 。例如,共同 id 元素是 header , footer , sidebar 。共同 class 元素是 highlight external-link .

    阅读级联并理解分配给各种选择器的优先级是一个好主意: http://www.w3.org/TR/CSS2/cascade.html

    但是,您应该了解的最基本的优先级是 id 选择器优先于 class 其他选择器。如果您有以下代码:

    <p id="intro" class="foo">Hello!</p>
    

    和:

    #intro { color: red }
    .foo { color: blue }
    

    文本将呈现红色,因为 id 选择器优先于 class 选择器。

  • 对于那些关心的人来说,#intro 优先的原因是由于所谓的特异性:w3.org/TR/CSS2/cascade.html#specificity

  • 老实说,除非与 JavaScript 集成有关(当你需要一个唯一值时),否则没人再使用 id 了。它是 html 的剩余部分,你不需要仅仅因为它存在就使用它。说你只有一个标题之类的东西,所以你需要 id 而不是 class 可能是正确的。但假设你有一个带有样式属性的搜索栏。如果你想在页面末尾添加另一个具有相同属性的搜索栏,你也做不到,因为 id 只能使用一次。老实说,我看不出 id 有什么用处。它不会让你的代码更有条理或其他什么。

  • 很长一段时间以来,我都把这两个东西混淆了。现在我明白了,'id' 应该引用唯一元素,而 'class' 可以根据它们的差异应用于多个元素或事物

  • 我更喜欢这样看待 ID:如果你有许多相似的元素(例如

  • 在一个
      ) and you want to have a single one of them to behave different (whether CSS or JS doesn't matter), then you use id attribute.
  • 也许一个类比可以帮助理解差异:

    <student id="JonathanSampson" class="Biology Calculus" />
    <student id="MarySmith" class="Biology Networking" />
    

    学生各不相同。校园内不会有两名学生拥有相同的学生彼此 共享至少一个 课程

    可以将多个学生归入一个 班级 名称下,例如生物学。但绝不可以将多个学生归入一个学生 ID .

    通过学校对讲系统 制定 规则班级 规则

    “明天,所有学生都要穿红色衬衫去上生物课。”

    .Biology {
      color: red;
    }
    

    或者,您可以通过调用特定学生的唯一 ID

    “乔纳森·桑普森明天将穿一件绿色衬衫。”

    #JonathanSampson {
      color: green;
    }
    

    在这种情况下,Jonathan Sampson 收到两个命令:一个是作为生物课学生收到的命令,另一个是直接要求。由于 Jonathan 是通过 id 属性直接被告知要穿绿色衬衫的,因此他将忽略先前要求他穿红色衬衫的请求。

    更具体的选择器将获胜。

  • @LucM 为什么不呢?

    is perfectly valid
  • @LucM 我误解了你的观点 - 非常正确,id 必须是唯一的,但你可以这样做

  • 何时使用 ID 而不是类

    两者之间的简单区别在于,虽然类可以在页面上重复使用,但 ID 只能在每个页面上使用一次。因此,在标记页面上主要内容的 div 元素上使用 ID 是合适的,因为只有一个主要内容部分。相反,您必须使用类来设置表格上的交替行颜色,因为根据定义,它们将被多次使用。

    ID 是一种非常强大的工具。具有 ID 的元素可以成为 JavaScript 的目标,该 JavaScript 可以以某种方式操纵元素或其内容。ID 属性可以用作内部链接的目标,用名称属性替换锚标记。最后,如果您使 ID 清晰且合乎逻辑,它们可以作为文档中的一种“自我文档”。例如,如果块的开始标记具有 ID,例如 \'main\'、\'header\'、\'footer\' 等,则您不一定需要在块之前添加注释来说明代码块将包含主要内容。

  • 引用 11

    一个id在整个页面内必须是唯一的。

    一个类可以适用于许多元素。

    有时,使用 id 是一个好主意。

    在一个页面中,通常有一个页脚、一个页眉...

    那么页脚可能位于带有 id 的 div 中

    还有课

  • ID 是唯一的。类不是。元素也可以有多个类。还可以动态地向元素添加和删除类。

    任何可以使用 ID 的地方都可以改用类。反之则不然。

    惯例似乎是对每个页面上的页面元素使用 ID(例如 \'navbar\' 或 \'menu\'),而对其他所有内容使用类,但这只是惯例,您会发现用法有很大差异。

    另一个区别是,对于表单输入元素,元素 <label> 通过 ID 引用字段,因此如果您要使用,则需要使用 ID <label> 。是一种可访问性,您确实应该使用它。

    在过去,ID 也是首选,因为它们在 Javascript 中很容易访问(getElementById)。随着 jQuery 和其他 Javascript 框架的出现,这现在几乎不再是问题。

  • 应该用于您想要相同样式的多个元素。用于 CLASS 应该 ID 唯一元素。请参阅本 教程 .

    如果您想成为严格的遵守者,或者希望您的页面符合 标准 您应该参考 W3C 标准

  • 类类似于类别。许多 HTML 元素可以属于一个类,并且一个 HTML 元素可以有多个类。类用于应用通用样式或可应用于多个 HTML 元素的样式。

    ID 是标识符。它们是唯一的;不允许其他人拥有相同的 ID。ID 用于将独特的样式应用于 HTML 元素。

    我以这样的方式使用 ID 和类:

    <div id="header">
      <h1>I am a header!</h1>
      <p>I am subtext for a header!</p>
    </div>
    <div id="content">
      <div class="section">
        <p>I am a section!</p>
      </div>
      <div class="section special">
        <p>I am a section!</p>
      </div>
      <div class="section">
        <p>I am a section!</p>
      </div>
    </div>
    

    在此示例中,标题和内容部分可通过 #header 和 #content 进行样式设置。内容的每个部分都可通过 #content .section 应用通用样式。为了好玩,我为中间部分添加了 \'special\' 类。假设您希望某个特定部分具有特殊样式。这可通过 .special 类实现,但该部分仍从 #content .section 继承通用样式。

    当我进行 JavaScript 或 CSS 开发时,我通常使用 ID 来访问/操作非常具体的 HTML 元素,并且使用类来访问/将样式应用于广泛的元素。

  • 应用 CSS 时,请将其应用于类,并尽量避免使用 ID。ID 应仅用于 JavaScript 中获取元素或用于任何事件绑定。

    应该使用类来应用 CSS。

    有时您确实必须使用类来进行事件绑定。在这种情况下,请尽量避免使用用于应用 CSS 的类,而是添加没有对应 CSS 的新类。当您需要更改任何类的 CSS 或更改任何元素的 CSS 类名时,这将有所帮助。

  • Twitter Bootstrap 使用了这一原则 - 即根本不使用 ID(v3.3)。这是一个更极端的例子,因为他们需要他们的库尽可能通用。它确实展示了只使用类的好处 - 那就是你可以用更少的更改将它应用于更多网站

  • CSS 选择器空间实际上允许条件 id 样式:

    h1#my-id {color:red}
    p#my-id {color:blue}
    

    将按预期呈现。为什么要这样做?有时 ID 是动态生成的,等等。进一步的用途是根据高级 ID 分配以不同方式呈现标题:

    body#list-page #title {font-size:56px}
    body#detail-page #title {font-size:24px}
    

    就我个人而言,我更喜欢更长的类名选择器:

    body#list-page .title-block > h1 {font-size:56px}
    

    因为我发现使用嵌套 ID 来区分处理有点不合理。只要知道,随着 Sass / SCSS 世界中的开发人员掌握了这些东西,嵌套 ID 就会成为常态。

    最后,当谈到选择器性能和优先级时,ID 往往会胜出。这是另一个话题。

  • 任何元素都可以有一个类或一个 ID。

    类用于引用特定类型的显示,例如,您可能有一个用于表示此问题答案的 div 的 css 类。由于会有很多答案,多个 div 需要相同的样式,因此您将使用一个类。

    一个 id 仅引用单个元素,例如右侧的相关部分可能具有特定于它自己的样式,而不会在其他地方重复使用,因此它将使用 id。

    从技术上讲,您可以为所有元素使用类,也可以按逻辑将它们分开。但是,您不能为多个元素重复使用 ID。

  • 类用于将样式应用于一组元素。ID 样式仅适用于具有该 ID 的元素(应该只有一个)。通常使用类,但如果是一次性元素,则可以使用 ID(或将样式直接粘贴到元素中)。

  • 在高级开发中 我们基本上可以使用JavaScript

    对于可重复的目的, 应该是唯一的 相比, id class

    下面是一个示例,说明上述表达式:

    <div id="box" class="box bg-color-red">this is a box</div>
    <div id="box1" class="box bg-color-red">this is a box</div>
    

    现在您可以看到这里 box box1 是两个(2)不同的 <div> box 类应用于它们两个。 bg-color-red

    这个概念是 OOP 语言中的继承。

  • 返回
    作者最近主题: