编写div＃id_name与#id_name有什么关系？

Question

我注意到很多css风格的食谱通常都是这样说的：

div#id_name {
    blah: blah;
}

但是，由于身份证是独一无二的，所以要坚持下去＆＃34; div＆＃34;在#id_name前面？以下代码段是否有任何优势？

#id_name {
    blah: blah;
}

我认为后者是优越的，因为你可能决定将id_name元素变成div之外的东西。

Answer 1

这主要是为了提高特异性，并提示文档提示#id_name是什么类型的元素。

首先，特异性：

特异性确定实际应用于元素的样式。您调用元素的特定越多，该属性块占用的优先级就越高。

例如：

给定HTML

<div id="id_name">
  Look at this blue text!
</div>

使用CSS

div#id_name {
  color: red;
}
#id_name {
  color: blue;
}

结果

这将呈现带有红色文本的div，而不是蓝色文本。如果你想保护你的风格不被本地风格任意覆盖，那么在编写框架时这是有益的。

其次，暗示：

CSS经常是事后的想法。这也是一种耻辱，因为它变得越来越强大，并承担了以前为JavaScript等客户端脚本语言保留的许多职责。 CSS中没有隐式继承，而是通过长声明显式。

我正在谈论的是你没有看到

div {
  .my-class {
     /* RULES! */
  }
  #my-id {
     /* RULES! */
  }
}

作为CSS的一部分，除非你使用像LESS或SASS这样的预编译器。使用元素名称而不是仅id或class来提示文档，不仅可以为将来的您提供更高的可读性，还可以为您在项目中拥有的任何协作者提供更高的可读性。

最后：

有时候没有为你的规则添加一个元素保护是没有意义的。如果我的规则设置了height，width或padding等内容，我就不希望将相同的规则应用于span。我宁愿看到它失败而不是沉默，以防止规则被应用，没有地方在那里。根据您描述的确切情况，它可能会导致混乱和意外的结果。

此外，我们无法保证#id-name不会在以后的页面上重复使用您所提供方案中不是div的元素。所以也是如此。

Answer 2

使用ID具有非常严格的特异性问题。实际上，根据标准，您只能在任何给定的HTML文档中使用ID一次。这并不意味着你不能使用ID作为样式选择器，但它在大型项目中确实存在危险的陷阱。如果你在Javascript中使用它们作为目标，它们就没问题了。发疯了。

ID选择器非常，在定位元素方面非常具体，作为回报，您最终会遇到与CSS特异性相关的问题。类选择器是可重用的，具有更宽松的特异性。使用ID的样式与类选择器没有任何不同，所以为什么在它们引起特异性问题时使用它们呢？阅读this和this。它们都是关于为什么ID不适合CSS的精彩文章。这是个人偏好，但是，使您的CSS 非常特定是所有真实案例Web开发中的前端灾难。

因此，要正确回答您的问题，请在div选择器的开头添加id，例如div#id_name，这意味着您只能将id应用于<div> 1}}元素。您无法将其添加到<span>或任何其他元素，例如，这是一种在CSS中使用样式的疯狂限制方法。如果您只使用#id_name，则可以在任何元素上应用此选择器。

Answer 3

唯一的区别是div#id_name具有更高的特异性。这很少相关，还有其他方法可以使选择器更具体。人们可以包含元素（标记）名称以用于文档目的，但是它们会承担问题中提到的风险：有人可能会将div更改为，例如p并忘记修改CSS选择器。