您为什么要在CSS中声明一个ID为的HTML选择器？

原始文件的编辑版本

声明

div#test

与仅声明为

#test

有何不同？我也可以在同一个样式表中声明这两个

#div test {

}

#test {

}

原始问题

如果我声明以下样式

div#test

与引用ID为

test

的

div

元素有何不同，例如

content

编辑

---

澄清我的意思是，

div#test

与只

#test

有什么不同，然后在

div

元素中引用它。

as id必须是唯一的，没有任何内容。尽管在外部样式表中，它可能允许读者知道该元素的类型。

因为id必须是唯一的，没有任何内容。尽管在外部样式表中，它可以让读者知道这适用于的元素类型。

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

---

但是，也许你应该考虑重命名这些冲突的元素，但并不总是可能的（例如，你不是唯一一个使用HTML和CSS或一些外部插件，不管怎样）。当然，这不是很好的保护，但在某些特定情况下仍然是有意义的。

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

但是，也许你应该考虑重命名这些冲突的元素，但并不总是可能的（例如，你不是唯一一个使用HTML和CSS或一些外部插件，不管怎样）。当然，这不是很好的保护，但在某些特定情况下仍然有意义。

如果在css中使用div#test，它将查找任何名称为test的ID，该ID属于div，就像您刚刚执行了#test一样，它可以应用于任何其他元素。它还为您的选择增加了特定性，并可能帮助那些查看您的代码的人确切地了解您所指的内容

例如

#测试{页边顶部：10px；}



div#test{背景：蓝色；}
这是贾根

希望这有帮助。

如果您在css中使用div#test，它将查找任何名为test的ID，该ID属于div，就像您刚刚执行了#test一样，它可以应用于任何其他元素。它还为您的选择增加了特定性，并可能帮助那些查看您的代码的人确切地了解您所指的内容

例如

#测试{页边顶部：10px；}



div#test{背景：蓝色；}
这是贾根

---

---

希望这有帮助。

问题到底是什么？一个是CSS选择器，一个是HTML代码段……我不明白你的问题。句子的第一部分描述了如何在CSS中引用这样一个div，第二部分是div本身的HTML。@Chris Farmer-我编辑了我的问题，希望我已经澄清了我试图理解的内容。@Ray Toal-我编辑了我的问题，希望我已经澄清了我试图理解的内容。问题到底是什么？一个是CSS选择器，一个是HTML代码段……我不明白你的问题。句子的第一部分描述了如何在CSS中引用这样一个div，第二部分是div本身的HTML。@Chris Farmer-我编辑了我的问题，希望我已经澄清了我试图理解的内容。@Ray Toal-我编辑了我的问题，希望我已经澄清了我试图理解的内容，如果该元素的id为say，为什么它引用的元素类型很重要

test

在本例中？如果该元素的id为say

test

，那么它所引用的元素类型又有什么关系呢？对，那么如果我声明

div#test

这将仅适用于

div

元素，即使我将id

test

分配给

p

，这是否意味着我可以在CSS样式表中有声明

div#test

和

#test

？+1个有趣的观察结果，并警告不要使用这种技术。@PeanutsMonkey是的，在样式表中可以有这两个规则。实验：）+1@mkk：只是为了澄清（你明确地没有告诉我），

id

属性在文档中必须是唯一的。因此，如果我声明了

div#test

，那么即使我用id

test

分配了

p

，这也意味着我可以在CSS样式表中声明

div#test

和

#test

观察加上对使用这种技术的警告。@PeanutsMonkey是的，您可以在样式表中同时使用这两条规则。实验：）+1@mkk：只是为了澄清（您明确地没有告诉我），

id

属性在文档中必须是唯一的。

#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>