HTML/CSS：关于带有包装器的 <div id> 和 <div class>答案

【问题标题】：HTML/CSS: About <div id> and <div class> with a wrapperHTML/CSS：关于带有包装器的 <div id> 和 <div class>
【发布时间】：2016-05-06 07:13:51
【问题描述】：

我在 HTML 中是全新的，我想知道包装器的事情。你能告诉我为什么先有 "div id" 然后在子代码中 "div class="wrapper" 吗？我可以替换 id > 与class 效果相同，反之亦然？我的意思是为什么它是先来后继？

    <header>
        <div class="Wrapper">
            <h1></h1>
            <nav></nav>
        </div>
    </header>


    <div **id**="heroImage">
        <div **class**="Wrapper">
            <h2></h2>
            <a></a>
        </div>
    </div>


    <div id="features">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>


    <div id="primaryContent">
        <article></article>
    </div>


    <div id="secondaryContent">
        <article></article>
        <article></article>
    </div>

【问题讨论】：

Id 属性在页面中是唯一的 - class 属性可以在每个页面中重复使用多次 - 它们的顺序无关紧要。在您的 HTML 中，wrapper 类可能包含一些 CSS 元素，这些元素也可以应用于其他 <div> 元素 - id 是一些独特的（因为内容？）并且将在CSS
Difference between div id versus div class的可能重复

标签： html css

【解决方案1】：

当您想引用特定的 div（或元素）时，您有 IDs，例如 heroImage。这意味着此 ID 可以仅引用此 div，而不能引用其他人，因此您在 CSS 中添加到 #heroImage 的属性（从不内联）将仅应用于此 div。

您正在使用名为 Wrapper 的 class，因为您在多个 div 中使用它。您可以在希望具有相同属性的所有 div 中使用此类。

注意关于 ID 和类的差异。一个元素的 ID，你想要的所有元素的类。

【讨论】：

【解决方案2】：

ID 是唯一的，并且类可能包含在多个元素中，可以帮助您的是以下链接，它解释了这一点：“https://css-tricks.com/the-difference-between-id-and-class/”

例如，在 Css 或 javascript/Jquery 中，如果您想访问 dom 的某些特定项目，那么 id 非常重要。

您可以使用类而不是 Id，但我认为它更复杂，因为如果您想使用 jquery 修改例如 div 的背景，您需要确保 dom 中的任何其他项目具有相同的类。

【讨论】：

【解决方案3】：

你能告诉我为什么第一个“div id”然后在子代码中 "div class="包装器" ?

这取决于你的 CSS，实际上谁先来并不重要。如果 ID 是唯一的并且需要与其他样式不同，则使用 ID。如果它与其他的样式相同，则使用 Class（具有相同样式的另一个使用相同的类）

我可以用 class 替换 id 以获得相同的效果，反之亦然反之？我的意思是为什么它是先来后继？

正如我上面的回答，无论谁先来。假设您要替换为 Class as MyID 的 ID 并且 Class 是 MyClass 如果元素（ID：MyID）可以与MyClass具有相同的样式。最好用 MyClass 替换它。

【讨论】：

【解决方案4】：

您是否看到您的问题在左侧有向上和向下箭头，在右侧有问题文本？所有这些物品都被“包裹”在一个看不见的盒子下。这些按钮也被包裹在父包装器内的另一个不可见的盒子中。

您可以创建一个元素（图像）并给它class="vote-button"。在您的 CSS 中，您可以将颜色“灰色”应用于任何具有“投票按钮”类的按钮。假设您想在单个按钮上应用唯一属性：例如您想将一个按钮的方向更改为向上，另一个按钮指向向下。您可以通过给每个按钮一个 id 来做到这一点：id="upvoteButton" 和 id="downvoteButton"。

【讨论】：