CSS样式嵌套 - 正确的表单？

我在尝试查找有关如何在样式表中正确编写CSS规则的任何具体细节时遇到问题，其中类或ID嵌套在许多其他ID和样式中，例如，CSS样式嵌套 - 正确的表单？

.mainbody #container #header #toprightsearch .searchbox {}

所以在这里我们有一个toprightsearch ID内的searchbox类，在头ID，在容器ID，在mainbody类。

但它似乎正常工作，如果我省略了一些ID的。

什么是这些上市的正确方法是什么？
如果我包括所有的父母，它是否使它更具体？如果我不包括所有的浏览器，它可以在不同的浏览器上出错吗？

并在此主题的任何附加信息，将不胜感激。

感谢

来源

2009-06-07 user103219

如果您有更多的父母，但也提高了选择特异性。您不应该忽略父母的跨浏览器问题。

没有正确多位家长列出的;这取决于你需要什么标记。正如您所看到的，selector1 selector2意味着在selector1内的任何级别都有selector2，您可以调整它以适应您需要的任何行为。

在你的榜样，您应该列出.mainbody #container #header #toprightsearch .searchbox如果你意味着是风格只适用于.searchbox ES这是整个层次内。如果相反，您希望.searchboxes存在于其他条件下以获得相同样式，那么您应该在层次结构中限制较少。这只是关于你想要完成的事情。

回复评论：标识产生更多的特异性，所以省略它们减少了您的规则的特殊性更多。

来源

2009-06-07 16:49:06 chaos

做什么它说（至少在Firefox）下面的代码。它的颜色输入红色

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Untitled Document</title> 
<style type="text/css"> 
.mainbody #container #header #toprightsearch .searchbox { 
    background-color:red; 
} 
</style> 
</head> 

<body class="mainbody"> 

<div id="container"> 
    <div id="header"> 
     <div id="toprightsearch"> 
      <input type="text" class="searchbox" /> 
     </div> 
    </div> 

</div> 
</body> 
</html>

我想你应该看看在拼写ID和类时是否出现了问题。

来源

2009-06-07 16:45:29 jao

谢谢，但我没有让它工作的问题。我只是注意到，如果我省略父母ID和类，它有时会起作用。所以我正在寻找列出规则的正确方法。 – user103219 2009-06-07 16:49:52

谁低估了这个问题。对于razass所问的这个问题，这是一个非常好的答案。 – Chuck 2009-06-07 17:28:37

从W3 Selectors Documentation：

后代选择表达的图案这样的关系。后代选择器由两个或多个由空格分隔的选择器组成。形式为“AB”匹配的后代选择，当元素B是一些祖先元素A的任意后代

因此，在短期，不，你不必须包括父元素的所有和不应该导致任何跨浏览器问题。然而，利用该选择器：

.mainbody .searchbox {}

定义的样式将适用于任何元件一类的searchbox其是否直接或间接地从下降的元素与mainbody类。

与您提出的选择，但是：

.mainbody #container #header #toprightsearch .searchbox {}

定义的样式是从一个元素降临，mainbody类更具体的，所以只有元素，然后用#container ID的元素，#header，#toprightsearch在该订单和类名为searchbox的订单将应用已定义的样式。

来源

2009-06-07 16:57:55

.searchbox {}

与.searchbox样式任何

.mainbody .searchbox{}

风格，从任何.mainbody，直接孩子，孙子，四曾孙下降的任何.searchbox，无所谓。只有

#toprightsearch > .searchbox {}

样式.searchboxes是#toprightsearch的直接孩子

#container * .searchbox {}

样式.searchbox的是孙子或更高的#container。

下面是关于这一主题的好文件：w3C selectors

来源

2009-06-07 17:00:18

ID是特定页面。所以，你只需要使用

#toprightsearch { 
stylename: stylevalue; 
}

如果您寻找嵌套类，然后以正确的格式是

.header .textBoxes { 
    stylename: stylevalue; 
}

如果你知道父母的确切孩子，那么你使用>符号。所以，如果你的文档是这样的：

<div class="header"> 
    <div class="menu"> 
     <input type="text" class="textBox" /> 
    </div> 
</div>

您可以使用此：

.header > .menu > .textBox {somestyle:somevalue;}

这意味着直接内。菜单类项目其本身直接低于只用.textBox类项目具有.header类的元素。

来源

2012-08-20 20:48:25 David

理论上，一个ID只能用于页面上的一个特定项目。所以，你应该只与toprightsearch所以你的CSS的ID一个项目，你只需要表明：

toprightsearch .searchbox {}

，因为只有一个项目在网页上用的toprightsearch的ID，其他所有的选择都不必要。

如果您的页面上有两个项目，ID为toprightsearch那么这就是错误的编码习惯。

来源

2017-10-24 19:08:33 Neptune704

CSS样式嵌套 - 正确的表单？

回答

相关问题