Question

我知道在样式表div＃name和#name做同样的事情。就我个人而言，我已经习惯使用div＃name作为大多数样式，因为它的速度稍微快一些，这意味着我可以通过查看CSS来更轻松地识别HTML元素。

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

事实上，我发现很难找到很多使用div＃name over #name

的网站

做#name我有什么优势吗？是否有任何理由在div＃name上使用它我还不知道？

Answer 1

由于div的{{1}}部分不是必需的（因为div#name每页都是唯一的），因此会删除较小的CSS文件。较小的CSS文件意味着更快的HTTP请求和页面加载时间。

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

Answer 2

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

在ID为“name”的分区可能与具有ID“name”的分区不同的情况下包含元素名称是有利的（其中它将在一种类型的页面上显示分区并且在另一种类型的页面）。这是非常罕见的，我从来没有亲自遇到过这样做的网站。通常他们只是为他们使用不同的ID。

包含元素名称的确比较快，但在 ID选择器中包含它并将其排除之间的速度差异非常非常小。通过排除它，比网站节省的带宽小得多。

Answer 3

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

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

如果声明#foo我们将更好地符合'关注点分离'和'KISS'原则。

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

Answer 4

由于像#name这样的id应该对页面是唯一的，因此没有理由将元素与它放在一起。 但是，div#name将具有更高的优先级 ，可能（或可能不）需要。请参阅this fiddle，其中以下#name未覆盖div#name的CSS。

Answer 5

我猜想在你的id选择器中包含元素名称实际上会更慢 - 浏览器通常使用id属性哈希元素，以便更快地查找元素。添加元素名称会增加额外的步骤，可能会降低它的速度。

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

#titlebar {
     background-color: #fafafa;
}

但是，在几个页面上，您包含另一个样式表，其中包含某些样式，这些样式对于这些页面是唯一的。如果要覆盖基本样式表中的样式，可以增强选择器：

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

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

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

a#productId {
     color: #0000ff;
}
span#productId {
    color: #cccccc;
}

Answer 6

仅使用#name ：

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

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

使用div＃name ：

你说“因为它的速度稍快一点”。如果没有渲染引擎开发人员自己的一些事实，我会毫不犹豫地做出这样的假设。

首先，引擎可能会按ID存储元素的哈希表。这意味着创建一个更具体的标识符可能不会有任何速度增加。

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

Answer 7

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

我也像这样构建我的CSS：

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

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

这对我来说很有意义。

Answer 8

关联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

div＃name vs #name

8 个答案: