CSS:为什么使用 "div#container"语法而不只是 #container？

Question

我看到 CSS 中使用了这种“div#container”语法，我想知道它是如何工作的。有人有它的资源吗？

Answer 1

除了作为上面提到的唯一引用之外，ID 还增加了特异性(我强烈建议您阅读这篇文章或一篇类似的文章 http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ ，了解 css 中的特异性将使您的生活更轻松)。

我将尝试用一个简短的例子来解释——采用以下内容:

  div#item { background: blue}

  <div id="item" class="item">Hello world</div>

这表示将所有 ID 为“container”的 div 设为蓝色，但如果您随后在样式表中添加以下样式

  #item {background: purple} 
  .item {background: green}

假设容器是绿色的，因为样式表是级联的，绿色背景的类排在最后。然而，情况并非如此，ID 具有更高的优先级，并且会覆盖某个类，即使该类稍后出现也是如此。此外，该元素不会是紫色的，因为您之前在 id 之前添加了 div。拥有 div 和 id 进一步提高了特异性。

人们经常像这样在 css 中指定元素:div#container 以增加样式的额外重要性或明确声明只有带有 id 容器的 DIVS 可以是蓝色的。

我建议不要这样做，因为它变得更难覆盖，如果你想让其他东西的背景为蓝色，那么样式就会变得不可用。因此，例如以下内容不会使段落变成蓝色，因为样式特别说明了 div。

 div#item {background: blue;}

 <p id="item">Hello world</p>

如果您想将 div#item 覆盖为粉红色而不是蓝色，您可能必须执行如下操作。

  div#item.item {background: pink}

这看起来还不错，但是当您开始构建复杂的网站时，这会使您的 CSS 变得非常笨拙。

我的建议是使您的 CSS 尽可能可重用，例如以下内容可以轻松覆盖并在任何标签上重复使用。

 .item { background: blue;}

希望对您有所帮助!认真阅读 css specificity，它真的会帮助你。