有选择地将样式表应用于 div

Question

我正在尝试使用多个 div 进行简单的网页设计。每个 div 应应用列表中的 1 个或多个外部样式表。

我的问题是，从我目前阅读的示例来看，我不确定如何优雅地做到这一点。似乎外部样式表应用于整个 html 文件。那么我应该考虑将我的 div 模块化成单独的文件吗？或者像 iFrame 这样的解决方案会是一个更简洁的解决方案吗？

当前解决方案：
外部 CSS：

div.test1 {
    color: purple;
    background-color: #d8da3d
}

.test2 {
    color: red;
    background-color: #d8da3d
}

#test3{
    color: green;
    background-color: #d8da3d
}

HTML 正文代码：

<div class="test1">
    <p> Style1
</div>

<div class="test2">
    <p> Style2
</div>

<div id="test3">
    <p> Style3
</div>

我的参考资料：
Div with external stylesheet?
http://www.htmlhelp.com/reference/css/style-html.html

Answer 1

- 1

看看这个： https://stackoverflow.com/a/17668004/1552518

- 2

或者只是为每个 div 添加一个类：

<div id="container">
    <div class='div1'>
        style1
    </div>
    <div class='div2'>
        Style2
    </div>
</div>

在你的外部 css 中：

.div1 {
    // Style applied only to the first div
}


.div2 {
    // Style applied only to the second div
}

- 3

或者，如果您无法向 div 添加类，请在 css 中使用：

#container > div:first-child {
    // Style applied only to the first div
}


#container > div:last-child {
    // Style applied only to the second div
}

Answer 2

您只是想以不同的方式设置 div 的样式吗？您是否考虑过为每个 div 使用一个类？

来自您提供的第二个链接：http://www.htmlhelp.com/reference/css/style-html.html#class

Answer 3

当你使用 css 样式时：

body{
 color:purple;
 background-color: #d8da3d
}

你是说你想用你设置的样式来设置整个文档的样式。

为了定位特定元素，您应该为这些元素指定 id 或 class。

例如：

<div id="test1"></div>
<div class="testing"></div>
<div class="testing"></div>

请注意，当使用and id时，你必须确保给元素一个唯一的id。然而，许多元素可以共享同一个类。因此，对于上面的示例，样式：

#test1{
  color:blue;
  background-color:black;
}
.testing{
  color:red;
  background-color:white;
}

将第一个样式（test1）应用于具有相同id的div，第二个样式（testing）应用于具有相同类的两个div。