CSS样式嵌套 – 正确格式?

我有一个问题,试图找到任何具体的细节,如何正确地编写CSS规则在样式表中,类或ID嵌套在许多其他ID和样式,例如
.mainbody #container #header #toprightsearch .searchBox {}

所以这里我们在一个toprightsearch ID,一个标题ID,一个容器ID,一个mainbody类中有一个searchBox类。

但是如果省略了一些ID,它似乎正常工作。

上市这些的正确方法是什么?
如果我包括所有的父母,它使它更具体?
如果不包括所有浏览器,它可能会错误吗?

并且任何有关此主题的其他信息将不胜感激。

谢谢

解决方法

如果你包括更多的父母,它会提高选择器的特异性。你不应该跨浏览器的问题省略父母。

没有正确的父母数量列出;这取决于您所需的标记。正如你所看到的,selector1 selector2意味着selector1中的任何级别的selector2,你可以根据需要调整任何行为。

在你的例子中,你应该列出.mainbody #container #header #toprightsearch .searchBox,如果你的意思是风格只适用于整个层次结构内的.searchBoxes。如果你想要在其他条件下存在其他条件的搜索框,以获得相同的样式,那么在层次结构中你应该更少的限制。这只是你想要完成的事情。

重新评论:ID产生更多的特异性,所以省略它们会降低你的规则的特异性。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效