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

Question

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

Answer 1

您要查找的已接近尾声：

E#myid  Matches any E element with ID equal to "myid".

换句话说，该选择器将匹配 <div id="container">。

当然，id 值必须是唯一的，因此您不需要指定元素名称。您可以使用 *#container 或仅使用 #container，很多人都这样做。显式输入元素名称可能被认为是更自记录的。

Answer 2

试着看看这个。这将告诉您这是如何工作的。

#abc {
text-align: center;
color: blue; }

现在，无论您在何处使用#abc，文本都将居中对齐，并且文本颜色将为蓝色。

您也可以根据需要进行自定义。

Answer 3

除了如上所述作为唯一参考外，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>

这表示将任何 div 的 ID 'container' 设置为蓝色，但如果您随后在样式表中添加以下样式

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

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

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

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

 div#item {background: blue;}

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

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

  div#item.item {background: pink}

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

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

 .item { background: blue;}

希望对您有所帮助！认真阅读css特异性，它真的会帮助你。

CSS: why is the "div#container" syntax used instead of just #container?