6

我知道在样式表中 div#name 和 #name 做同样的事情。就我个人而言，我已经开始使用 div#name 进行大多数样式设置，原因是它稍微快一些，这意味着我可以通过查看 CSS 更轻松地识别 HTML 元素。

然而，我似乎看到的所有大型网站都使用#name over div#name（包括堆栈溢出）

事实上，我发现很难找到许多使用 div#name 而不是#name 的网站

做我缺少的#name 有什么好处吗？是否有任何理由在我还不知道的 div#name 上使用它？

4

8 回答 8

4

由于不需要该div部分（因为每个页面都是唯一的），因此可以使用较小的 CSS 文件将其删除。更小的 CSS 文件意味着更快的 HTTP 请求和页面加载时间。div#nameID

正如 NickC 所指出的，缺少div允许人们在不破坏样式规则的情况下更改元素的 HTML 标记。

于 2012-04-03T22:15:42.883 回答
3

由于 ID 在页面上必须是唯一的，因此您遇到的大多数 ID 在您的样式表中只会出现一次，因此不必费心包含它将出现在哪个元素上是有意义的。排除它还会在您的样式表中节省一些字符，这对于每天访问数百万次的大型网站来说可以节省相当多的带宽。

如果 ID 为“name”的划分可能与 ID 为“name”的跨度不同（其中它会在一种类型的页面上显示一个划分，而在另一种类型的页面上显示一个跨度，则包含元素名称是一个优势。页）。不过，这非常罕见，而且我从未亲自遇到过这样做的网站。通常他们只是为他们使用不同的ID。

确实包含元素名称更快，但是在ID 选择器上包含它和排除它之间的速度差异非常非常小。比站点通过排除它节省的带宽要小得多。

于 2012-04-03T22:16:04.377 回答
3

代码可维护性和可读性的问题。

当声明element#foo代码样式变得僵硬时——如果想要更改文档的结构或替换元素类型，则还必须更改样式表。

如果声明#foo我们将更好地遵守“关注点分离”和“KISS”原则。

另一个重要的问题是 CSS 文件会被几个字符缩小，这可能会在大型样式表上构建许多字符。

于 2012-04-03T22:18:33.227 回答
3

由于 id like#name对页面来说应该是唯一的，因此本身没有理由将元素与它一起放置。但是，div#name将具有更高的优先级，这可能（或可能不）需要。请参阅this fiddle，其中以下内容#name不会覆盖div#name.

于 2012-04-03T22:19:35.310 回答
3

我猜想在 id 选择器中包含元素名称实际上会更慢 ——浏览器通常会散列带有 id 属性的元素，以便更快地查找元素。添加元素名称会增加一个额外的步骤，这可能会减慢它的速度。

您可能希望将元素名称与 id 一起使用的原因之一是您需要创建更强大的选择器。例如，您有一个基本样式表：

#titlebar {
     background-color: #fafafa;
}

但是，在一些页面上，您包含另一个样式表，其中包含这些页面独有的一些样式。如果你想覆盖基本样式表中的样式，你可以加强你的选择器：

div#titlebar {
    background-color: #ffff00;
}

此选择器更具体（具有更高的特异性），因此它将覆盖基本样式。

您希望将元素名称与 id 一起使用的另一个原因是，如果不同的页面对相同的 id 使用不同的元素。例如，当没有合适的链接时使用跨度而不是链接：

a#productId {
     color: #0000ff;
}
span#productId {
    color: #cccccc;
}
于 2012-04-03T22:31:11.440 回答
2

仅使用 #name：

那么第一个明显的优势是编辑 HTML（模板或其他）的人不会在不知道 CSS 的情况下通过更改元素来破坏 CSS。

对于所有新的 HTML5 元素，元素名称已经变得更加可互换，仅出于语义目的（例如，将 a 更改<div>为更具语义的<header>或<section>）。

使用 div#name：

你说“理由是它稍微快一点”。如果没有来自渲染引擎开发人员自己的一些确凿事实，我什至会犹豫做出这个假设。

首先，引擎很可能会按 ID 存储元素的哈希表。这意味着创建更具体的标识符不太可能提高速度。

其次，更重要的是，这样的实现细节会因浏览器而异，并且随时可能发生变化，因此即使您有硬数据，也不应该让它成为您开发的因素。

于 2012-04-03T22:15:46.237 回答
0

我使用 div#name 是因为代码在 CSS 文件中更具可读性。

我也像这样构建我的 CSS：

ul
{
    margin: 0;
    padding: 0;
}
ul.Home
{
    padding: 10px 0;
}
ul#Nav
{
    padding: 0 10px;
}

所以我开始通用，然后变得更具体。

这对我来说很有意义。

于 2012-04-03T22:30:43.097 回答
0

链接 div 名称：http: //jsfiddle.net/wWUU7/1/

CSS：

<style>
div[name=DIVNAME]{
color:green;
cursor:default;
font-weight:bold;
}

div[name=DIVNAME]:hover{
color:blue;
cursor:default;
font-weight:bold;
}
</style>

HTML：

<div name="DIVNAME">Hover This!</div>

Css 选择器列表：http: //www.w3schools.com/cssref/css_selectors.asp

于 2013-08-25T15:30:23.540 回答