导航栏和网站内容的 CSS 选择器性能

Question

我刚刚阅读了一些关于 CSS 选择器性能等的文章，现在我很困惑如何以最佳方式使用它们。因此，我将向您展示一个问题含义的示例：

我将在我的网站上创建一个导航栏，以下是一些方法：

1. 标记：header、nav、ul、li、a >
2. 只执行名为：div id="header" 且带有 ul、li 和 a 标签的 div

CSS 样式：

取决于我们要使用哪个选项，但对于第一个选项，我应该为网站上的导航栏和整个内容设置样式吗？：

header {style}
header nav {style}
header nav ul {style}
header nav ul li {style}
header nav ul li a {style}

还是这样？：

header will have class="header"
nav will have class="navigation"
ul will have class="unordered-list"
li will have class="list-item"
a will have class="link"

So it will looks like:
.header {style}
.navigation {style}
.unordered-list {style}
.list-item {style}
.link {style}

对于第二个选项，我应该像这样设置导航栏的样式吗？：

#header {}
#header ul {}
#header ul li {}
#header ul li a {}

谁能告诉我哪个选项更好或建议一些其他选项？

抱歉，如果有什么不清楚的地方，但我正在尝试学习 html 和 css，但我不太擅长英语解释。

Answer 1

1. 为语义使用标题。如果您在 JS 中需要，请添加 id。
2. 对于风格化使用类。就性能而言，它比标签更好。

例如

header nav ul li a {style}

首先，浏览器搜索文档中的所有a标签。然后它搜索其中哪些包含在 li 内部，然后在 ul 等内部。