E#myid 与 #myid CSS 选择器答案

【问题标题】：E#myid vs. #myid CSS SelectorsE#myid 与 #myid CSS 选择器
【发布时间】：2010-10-08 10:10:17
【问题描述】：

鉴于页面上只能有一个带有#myid 的元素，我很好奇黑白 E#myid 与 #myid（E 是任何元素）有什么区别？

【问题讨论】：

【解决方案1】：

#myid 对 input 元素没有影响一定是您的错误/错误。对我来说效果很好。

当你改变你的问题时：

图像您有两个不同的文档，它们都使用相同的样式表。在一个文档中，DIV 元素的 ID 为“foo”，而在另一个文档中，SPAN 元素的 ID 相同。然后，您可以使用以下样式表为两个元素设置不同的样式：

#foo {
    color: #FFF;
}
div#foo {
    background-color: #F00;
}
span#foo {
    background-color: #0F0;
}

这两个元素的字体颜色相同，但背景颜色不同。

【讨论】：

我不想在一个常见的项目上工作。颤抖 :)
根据您提供的示例，您的意思是相同的字体颜色但不同的背景颜色。
哦，你是对的。我首先以另一种方式举例，但忘记了解释。
请不要重复使用 ID 值。这就是为什么好上帝给我们上课的原因。

【解决方案2】：

它们有不同的特异性。

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

【讨论】：

【解决方案3】：

这两个选择器有不同的特异性。在更具体的选择器中给出的规则将覆盖在不太具体的选择器中给出的规则。

特异性规则非常简单。每当发生冲突（两个或多个规则在同一元素上设置不同的值）时，按顺序查询以下规则：

1) 规则存在于什么“空间”中？较高“空间”中的规则自动胜过较低空间中的规则： a) 由用户的样式表设置，带有 !important b) 由作者的样式表设置，带有 !important c) 由浏览器的样式表设置，带有 !important d) 在 style="" 规则中设置 e) 由用户的样式表设置，不带 !important f) 由作者的样式表设置，不带 !important g) 由浏览器的样式表设置，不带 !important

2) 选择器中有多少个#id？具有更多#id 的选择器会自动战胜具有更少#id 的选择器（假设它们与规则#1 并列）。

3) 选择器中有多少个 .classes 或 :pseudoclasses？拥有更多 .classes 的选择器会自动战胜拥有更少 .class 的选择器（假设它们与之前的规则并列）。

4) 选择器中有多少个普通元素？同样，越多越好。

5) 最后，该规则在文档中有多远？如果后面的规则与前面的所有类别相关，则后面的规则会覆盖前面的规则。这适用于文档内（在 CSS 文件的底部与顶部）和文档之间（第二个 ed css 文件中的任何规则都比第一个 ed css 文件中的规则“晚”） .

了解特异性可以帮助您编写更简单的 CSS。我几乎总是以最接近的#id 开始我的选择器，因为它同时将选择器的传播限制为我想要的元素，和自动覆盖我可能的任何“全局”css 规则已在文档中设置。

【讨论】：

【解决方案4】：

不同之处在于，在不同的页面中，您可以使用该 ID 拥有不同的元素。为什么你会这样做，这超出了我的理解，但它可能需要（仅作为示例）某些页面上的 div 具有与其他页面上的 span 相同的属性。

不同的浏览器会在未指定的极端情况下为您提供不同且奇怪的结果。有些浏览器允许多个元素共享同一个 id，有些则不允许。它甚至会随着同一浏览器的不同版本而变化。在不知道您使用的浏览器的情况下，很难复制该错误，但我建议您在多个浏览器上测试您的 css。

【讨论】：

【解决方案5】：

与其他人一起指出，ID 在页面上不一定是唯一的......

可以将一个 ID 应用于 N 个不同元素中的任何一个（例如

或

不是说这是否是一个好的设计......只是说这是可能的。

编辑：我的意思是服务器端可以生成一个页面，其中 either 一个

或一个 >UL>... 不能同时使用两者。想想动态网页。再说一遍……我并不是说这是一个好的设计……只是说它是可能的。

【讨论】：

然而，它违反了标准，因此可能无法预测。一些浏览器会丢弃所有的 ID 重新定义（保留第一个），其他浏览器会覆盖（保留最后一个），它们在 CSS 与 JS 中的行为可能不同，&c。这是一件坏事。不要这样做。