E#myid vs. #myid CSS选择器

时间:2009-02-18 19:04:07

标签: css css-selectors

我很好奇有什么区别是b / w E#myid与#myid(E是任何元素),因为页面上只能有一个带有#myid的元素?

5 个答案:

答案 0 :(得分:6)

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


当你改变你的问题时:

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

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

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

答案 1 :(得分:4)

答案 2 :(得分:1)

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

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

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文件底部和顶部)和文档之间(第二个< link> ed css文件中的任何规则都比'first< link> ed css中的规则'晚'文件)。

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:-1)

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

可以将一个ID应用于N个不同元素中的任一个(例如< UL Id = MyList>或< OL Id = MyList>)。然后你可以使用不同的javascript来处理各种元素(即处理UL的一些代码,处理OL的不同代码)。

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

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

相关问题