有没有理由说明为什么要在CSS中声明带有ID的HTML选择器？

Question

原始

的编辑版本

声明div#test如何宣布它只是#test？我也可以在相同的样式表中声明两者，即

#div test {

}

#test {

}

原始问题

如果我要声明以下样式div#test，引用标识为div的{​​{1}}元素会有什么不同，例如test

修改

澄清我的意思是<div id="test">content</div>与div#test的不同之处，然后在#test元素中引用它。

Answer 1

如果你有每个页面的全局css，并且在一个页面上你将#test添加到div元素，而在另一个页面上你为p添加它，这是有意义的。在这种情况下，即使p具有id #test，如果使用div #test而不是#test，css规则也不会应用于它。

然而，你可能应该考虑重命名这些冲突的元素，但并不总是这样（例如你不是唯一一个使用html和css或者一些外部插件的人，无论如何）。当然，它不是很好的保护，但在某些特定情况下仍然有意义。

Answer 2

因为id必须是唯一的。虽然在外部样式表中，它可以让读者知道这适用的元素类型。

Answer 3

如果您在css中使用 div #test ，它会查找名称为test的任何ID，该ID属于div，就像您刚刚 #test ，它可以应用于任何其他元素。它还为您的选择增加了特异性，并且可能有助于那些审查您的代码的人确切知道您所指的是什么。

实施例

#test { margin-top: 10px; }

<ul id="test">
  <li><a href="#">LinkyLink</a></li>
</ul>

div#test { background: blue; }

<div id="test">
    <p>This is jargan!</p>
</div>

希望这有帮助。