Question

我对容器/包装器内的网页中的不同元素有疑问。容器中的不同元素（如header，nav，main和footer）在使用CSS在Dreamweaver中创建（插入div标签）时。我在youtube上看到了不同的方式让我困惑！有些人将元素保存为类，其他人在创建插入div标签时将其保存为 id （如class：footer或id：footer）。什么是正确的？

我对这些元素有类似的疑问。关于选择器名称，有些人将元素保存为例如 .main 或 #main （选择器名称）什么是正确的？关于网页的主容器/包装器的相同问题。选择器名称 .container 或 #container ？

感谢您的帮助！

编辑：由于我收到的评论我的问题不明确，我会尝试更具体。我不确定如何标记我的主包装（容器）以及上面提到的子元素（在容器中）。我不确定在标记选择器名称时使用什么前缀。我也不确定是否使用id或class，因为我看到了不同的建议。很抱歉不清楚。

Answer 1

这里的规则是每个页面只能使用一次id，而你可以根据需要多次使用一个类。但他们或多或少做同样的事情。

CSS：

<style>
#container {width:100%}
.main {background-color:blue}
</style>

在这个例子中，容器是id，而main是一个类。

html：

<div id="container">
    <p class="main></p>
</div>

没有关于使用什么的规则而不是重用页面上的id。 id充当唯一标识符。所以你可以创建这样的链接：

<a href="#container">jump to container</a>

这些标签也不仅仅适用于div - 它们可以用于任何html元素。如果你想更具体一点，你可以写：

<style>
div#container {width:100%}
div.main {background-color:blue}
p.main {color:red}
</style>

<div id="container">
    <div class="main>
        <p class="main">Red text blue background hurts the eyes!</p>
    </div>
</div>

现在当我第一次想到它时，这种想法引起了我的注意，但你也可以像这样重写上面的代码：

<style>
div#container {width:100%}
.main {background-color:blue}
.main p {color:red} /*all 'p's inside 'main' have red text*/
</style>

<div id="container">
    <div class="main>
        <p>Red text blue background hurts the eyes!</p>
    </div>
</div>

这使得标记更清晰。

Answer 2

您可以使用任何一种方式，例如：

Integral

甚至只是<div class="footer"></div> <div id="footer"></div>（HTML5）

具有相应的css样式：

<footer></footer>，.footer和#footer。

id和类之间的主要区别在于id应该在页面上是唯一的，而具有相同类的元素可以在一个页面上多次使用。

CS5 dreamweaver - CSS - 类或id和选择器名称

2 个答案: