ZZ *_*der 51 css css-selectors
我看到这样的选择器,
.class1 .class2 .class3 {
}
这是什么意思？
我使用了多个没有空格的类选择器.空间意味着后代,但它对课程没有意义.
Ami*_*t G 74
假设有一个带有以下标记的页面,
<div class="class1">
<div class="class2">
<div class="class3">
Some page element(s).
</div>
</div>
</div>
您提供的CSS将为class3下的所有元素设置样式,这些元素位于class2下的class2下.
也就是说这是造型,
.class1 .class2 .class3{
color:red;
}
它会将文本呈现为红色,这相当于以下内容,
div.class1 div.class2 div.class3 {
color:red;
}
最后,以下什么都不做,
.class1.class2.class3{
color:red;
}
编辑:如果标记改为以下,
<div class="class1 class2 class3">
Some page element(s).
</div>
它可以工作并将文本呈现为红色.
注意:<IE7可能与上述问题有关...
http://www.thunderguy.com/semicolon/2005/05/16/multiple-class-selectors-in-internet-explorer/ http://www.w3.org/TR/2004/CR-CSS21-20040225/ selector.html#类HTML
其他答案为您提供所需的解释; 我将填写一个实用的用例,只是为了满足任何人的好奇心.
由后代组合子分隔的多个类选择器的常见实际用例是当站点对于某些页面或某些设备具有不同的主体类时.
例如,考虑一个简单网站的这个标记.除页眉和页脚外,它还有一个内容列和两个侧边栏:
<!-- DTD, html, head... -->
<body>
<div id="wrap">
<div id="header">
<h1>My Site</h1>
</div>
<div id="content">
<!-- ... -->
</div>
<div id="side1" class="sidebar"><!-- ... --></div>
<div id="side2" class="sidebar"><!-- ... --></div>
<div id="footer">
<p>Copyright LOLOLOL</p>
</div>
</div>
</body>
</html>
默认设置可能是#content在.sidebars 之间进行安排,完成一些我不会到达的浮动技巧.
在移动设备上,除了为小分辨率重新调整整个内容之外,设计师也许想要取消侧边栏以回收一些横向屏幕区域.除了媒体查询之外,使用服务器端代码检测移动浏览器并body相应地使用类标记也是一个更简单的选项,如下所示(ASP.NET C#示例):
<% if (((HttpCapabilitiesBase) Request.Browser).IsMobileDevice) { %>
<body class="mobi">
<% } else { %>
<body>
<% } %>
这就是你的例子派上用场的地方.设计人员只使用以下规则隐藏移动设备的侧边栏:
/* This would appear just beneath the .sidebar { ... } rule */
.mobi .sidebar {
display: none;
}
当然,可以使用相同的浏览器检测代码来完全隐藏侧边栏标记,削减页面大小和所有爵士乐,但这又是另一种接近它的方式.我只是给出一个快速实际的例子,说明如何在CSS中使用层次结构中的多个类选择器.
div{
padding: 5px;
border: 1px solid #f00
}
.class1 .class2 .class3 {
background-color: #000;
}
将改变最里面的div的背景：
div{
padding: 5px;
border: 1px solid #f00
}
.class1 .class2 .class3 {
background-color: #000;
}
换句话说，它意味着应用样式，该class3样式是 的子级，而class2是 的子级class1。
如果删除空格，您的样式规则将应用于以下内容：
.class1.class2.class3{
background-color: #000;
}
<div class="class1 class2 class3">
</div>