时间戳

首页 > 解决方案 > 导航栏和网站内容的 CSS 选择器性能

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

问题描述

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

我将在我的网站上创建一个导航栏，这里有一些方法可以做到这一点：

  1. 做标签：header , nav , ul , li , a
  2. 只做 div named: div id="header" with ul , li和a标签

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，但我不太擅长英语解释。

标签： htmlcssperformancecss-selectorstags

解决方案

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

例如

header nav ul li a {style}

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

推荐阅读