Question

我在eveywhere搜索了一个“答案”但找不到关于这场辩论的人。我知道在这个问题上不可能有“这是对的”或“这是错的”，但我想听听可能是“正确的”。

我对HTML5元素和CSS（设置样式）有疑问。

所以我想知道的一个例子是什么是“更正确”：

<header>
    <div class="some-element-inside">...</div>
</header>

或

<header class="header">
    <div class="some-element-inside">...</div>
</header>

然后将它们设置为：

header .some-element-inside { }

或

.header .some-element-inside { }

或

header.header .some-element-inside { }

我真的很想听听你的意见，我们在这里谈论一个简单的网站，正常的标题设计并不复杂。

我个人更喜欢带有类的HTML5元素。

谢谢！

Answer 1

为什么在没有需要的时候添加课程？

<header>
        <nav>
             <ul> 
                 <li>Text 1</li>
                 <li>Text 2</li>
                 <li>Text 3</li>
             </ul>
        </nav>
</header>

在这个例子中，没有必要添加一个类。

CSS将与descendant selectors：

header {}
header nav {}
header nav ul {}
header nav ul li {}

即使你需要添加一个样式，让我们说第二个列表标签，你也可以不添加一个类：

header nav ul li:nth-child(2) {}

所以语义方法是将类保持在必需品上。当你有几个选择器并且你不能从他们的父母那里瞄准他们时，使用选择器的类。

Answer 2

selector.class被许多人视为坏习惯。在剩下的两个中，我会使用.class，因为<header>标记的目的不仅是页面的标题。它也可以是其他元素的标题。您的页面现在只能有一个标题，但稍后可能会有更多标题。通常，应用element选择器应适用于此类型的所有以后的元素，而.class选择器应适用于所选元素。

Answer 3

由于页面的内容或意图，动态网站中总会出现一个页面需要与大多数不同的外观的情况。在这些情况下，动态生成的页面可以插入一个类来应用其他CSS。

此外，还有一个概念将一类样式应用于那些将在页面上其他地方应用的HTML5元素。

CSS：

header {
  color: #0f0f0f;
}

.wrapper {
  color: #c9c9ff;
}

.content {
  font-size: 2px;
}

HTML：

<header class="content">This is font 2px</header>
<div class="wrapper">
  <div class="content">This is font 2px</div>
</div>

最后，它实际上取决于您对如何设计风格的偏好。我希望这有帮助。 ^^

HTML5元素应该有类吗？

3 个答案: