Question

我很好奇有什么区别是b / w E＃myid与#myid（E是任何元素），因为页面上只能有一个带有#myid的元素？

Answer 1

#myid对input元素没有影响，这一定是你的错误/错误。它对我来说很好。

当你改变你的问题时：

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

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

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

Answer 2

它们具有不同的特异性。

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

Answer 3

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

特异性规则非常简单。只要存在冲突（两个或多个规则在同一元素上设置不同的值），就会按顺序查询以下规则：

1）规则居住的“空间”是什么？较高“空间”中的规则会自动胜过较低空间中的规则： a）由用户的样式表设置，带有！important b）由作者的样式表设置，带有！important c）通过浏览器的样式表设置，使用！important d）设置style =“”规则 e）由用户的样式表设置，没有！important f）由作者的样式表设置，没有！important g）由浏览器的样式表设置，没有！important

2）选择器中有多少个#id？具有更多#id的选择器会自动赢得较少的选择器（假设它们与规则＃1相关联）。

3）选择器中有多少个.classes或：pseudoclasses？具有更多.classes的选择器会自动赢得较少的选择器（假设它们与先前的规则相关联）。

4）选择器中有多少个普通元素？再一次，越多越好。

5）最后，文件中的规则是多少？如果它们与所有先前的类别相关联，则后面的规则会覆盖先前的规则这适用于文档（位于CSS文件底部和顶部）和文档之间（第二个＆lt; link＆gt; ed css文件中的任何规则都比'first＆lt; link＆gt; ed css中的规则'晚'文件）。

了解特异性可以帮助您编写更简单的CSS。我几乎总是用最接近的#id启动我的选择器，因为它同时限制选择器的扩展到我想要的元素，和自动覆盖任何'全局'css规则我可能已在文件中设定。

Answer 4

不同之处在于，在不同的页面中，您可以使用该ID使用不同的元素。为什么你会这样做，超出我的范围，但可能需要（只是一个例子）某些页面上的div与其他页面上的span一样具有相同的属性。

不同的浏览器会在非指定的边角情况下为您提供不同且奇怪的结果。有些浏览器允许多个元素共享相同的id，而其他浏览器则不允许。它甚至会随同一浏览器的不同版本而变化。在不知道您使用的浏览器的情况下，复制错误更加困难，但我建议您在几个浏览器上测试您的CSS。

Answer 5

与其他人一起关于ID的要点在页面上并不是唯一的......

可以将一个ID应用于N个不同元素中的任一个（例如＆lt; UL Id = MyList＆gt;或＆lt; OL Id = MyList＆gt;）。然后你可以使用不同的javascript来处理各种元素（即处理UL的一些代码，处理OL的不同代码）。

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

编辑：我的意思是服务器端可以生成和＆lt; OL＆gt;的页面。或者>＆gt; UL＆gt; ......不是一次两者。想想动态网页。再说一次......如果这是一个好的设计，我不会这样或那样说......只是它是可能的。

E＃myid vs. #myid CSS选择器

5 个答案: