在HTML 5的语义元素中添加css样式正确吗？

将样式添加到HTML5语义（导航、页眉、页脚等）是否正确，就像我们将它们添加到divs一样？ 用它们代替常规div

有一次，我从我尊敬的某个人那里听说，我们不应该在HTML5语义元素中添加任何样式——只有在确实需要添加一些样式的情况下才可以，但不要在这些元素中添加太多样式。他说得对吗

比如说

<nav>
    <ul>
        ................
    <ul>
</nav>



nav {
    background-color: .....
    width: ....
    height: ......
    margin: .....
    color: ......
    padding: ......
}

................

导航{
背景色：。。。。。
宽度：。。。。
身高：。。。。。。
保证金：。。。。。
颜色：。。。。。。
填充：。。。。。。
}

而不是

<nav>
    <div id="nav">
        <ul>
            ................
        <ul>
    </div>
</nav>



#nav {
    background-color: .....
    width: ....
    height: ......
    margin: .....
    color: ......
    padding: ......
}

................

#导航{
背景色：。。。。。
宽度：。。。。
身高：。。。。。。
保证金：。。。。。
颜色：。。。。。。
填充：。。。。。。
}

我们应该怎样做才对？ 正确的编码方式是什么？

---

处理它的最佳方法是什么？

将结构/内容（您的html代码）从样式中分离出来的想法正好为您提供了这种能力，并实际推动您朝着这个方向前进

该结构使多台设备能够更好地理解您的内容，从而为您的用户提供更好的体验。例如，如果您只使用

ul>li

结构作为菜单，一些非常规浏览器的设备将无法完全理解这是您网站的菜单，而使用

nav>ul>li

的设备正好提供了这一点

该样式只告诉设备应该如何显示它们，并且您应该使用它来给用户提供更好的体验

语义元素帮助我们分离页面的结构，例如：

---

将结构/内容（html代码）与样式分离的想法恰恰赋予了您这种能力，并实际推动您朝着这个方向前进

该结构使多台设备能够更好地理解您的内容，从而为您的用户提供更好的体验。例如，如果您只使用

ul>li

结构作为菜单，一些非常规浏览器的设备将无法完全理解这是您网站的菜单，而使用

nav>ul>li

的设备正好提供了这一点

该样式只告诉设备应该如何显示它们，并且您应该使用它来给用户提供更好的体验

语义元素帮助我们分离页面的结构，例如：

好吧，HTML5语义（导航、页眉、页脚等）的创建是为了帮助我们为网页的各个部分提供有意义的、自描述性的名称。它们应该是独一无二的

因此，在引入这些语义之前，部分是这样做的：

<div id="main-section">
  your content
</div>
<div id="sidebar">
  your sidebar content
</div>

你的内容
你的边栏内容

HTML5语义被认为是将我们从上述情况中解救出来的，同时也是描述性的

样式被添加到上面的部分，我不明白为什么我们现在不能这样做。实际上，没有任何规则禁止向HTML5语义添加样式，但首先要确保HTML5语义用于唯一元素。

创建HTML5语义（导航、页眉、页脚等）是为了帮助我们为网页的各个部分提供有意义的自描述性名称。它们应该是独一无二的

因此，在引入这些语义之前，部分是这样做的：

<div id="main-section">
  your content
</div>
<div id="sidebar">
  your sidebar content
</div>

你的内容
你的边栏内容

HTML5语义被认为是将我们从上述情况中解救出来的，同时也是描述性的

---

样式被添加到上面的部分，我不明白为什么我们现在不能这样做。没有任何规则禁止向HTML5语义中添加样式，但首先要确保HTML5语义用于唯一元素。

我同意。避免向语义元素添加样式。这是因为当我们谈论事物的“外观”时，这些元素并没有添加任何新的内容

请记住，您希望避免冗余。如果需要块元素，则需要考虑“look”，因此使用div和样式。然后，如果愿意，立即在该div中添加语义元素。无论是在css中，还是在javascript中，尽可能地隐藏语义元素，甚至隐藏选择器。但是，添加一个标记这些语义元素的自定义类有助于提高清晰度。因此，不是：

div > * h1,

你可以这样写：

div > .semanticElement h1. 

为了清晰起见，这应该更好，同时避免引用语义元素

---

如果上述某些原因不清楚，可以这样想。一个元素的语义发生了变化，现在我突然也不得不在css和javascript中进行更改，这很荒谬。

我同意。避免向语义元素添加样式。这是因为当我们谈论事物的“外观”时，这些元素并没有添加任何新的内容

请记住，您希望避免冗余。如果需要块元素，则需要考虑“look”，因此使用div和样式。然后，如果愿意，立即在该div中添加语义元素。无论是在css中，还是在javascript中，尽可能地隐藏语义元素，甚至隐藏选择器。但是，添加一个标记这些语义元素的自定义类有助于提高清晰度。因此，不是：

div > * h1,

你可以这样写：

div > .semanticElement h1. 

为了清晰起见，这应该更好，同时避免引用语义元素

如果上述某些原因不清楚，可以这样想。一个元素的语义发生了变化，现在突然我还必须在css和javascript中进行更改，这很荒谬