CSS在哪里放置每个页面的元素位置代码？

Question

我知道css是否用于造型按钮等外观......但是当我定位元素时呢？每个页面都有不同的元素位置/元素。为每个页面上的每个元素创建一个id并在主css文件中的位置是否有意义？

Answer 1

在设计页面时，将内容（例如HTML）与样式（例如CSS）分开是非常重要的。一个结构良好的网页应该能够大声读出并且仍然有意义。

在此上下文中，元素的位置应定义为与其他元素相关，而不是与整个页面相关。这些元素也可以分配给类（例如<div class="announcement">）。

这为您提供了很多权力，因为您不仅可以为类（或id）定义不同的行为，还可以为父类定义不同的行为。以这些场景为例：

情景1：

<div class="post-content">
    <div class="announcement">
        Some text
    </div>
</div>

情景2：

<div class="special-content">
    <div class="announcement">
        Some text
    </div>
</div>

＆＃34;公告＆＃34;的主要css规则可以是一样的。但是你可以对＆＃34;公告＆＃34;制定一个特殊的规则。这是一个特殊内容＆＃34;区域。因此，您可以为应该不同的属性添加另一个规则。不仅是位置，还有其他任何东西：

.announcement {
    color: red;
}

.post-content .announcement {
    padding-left: 5px;
}

.special-content .announcement {
    padding-left: 20px;
}

当然，您可以与类，ID或标准元素建立类似的关系。阅读MDN中有关选择器的更多信息。