Question

我试图给所有带孩子的<div>一个风格，而不是那些没有孩子的人。或者，为所有人提供风格，并为没有孩子的人提供不同的风格。结构与此类似

<div>
    <div>
         <div>
              <div>Don't style me</div>
              <div>Don't style me</div>
         </div>
         <div>Don't style me</div>
         <div>Don't style me</div>
         <div>
             <div>
                  <div>Don't style me</div>
             </div>
         </div>
    </div>
 </div>

Answer 1

CSS级别4正在进行中，并将包含可以执行您所要求的选择器。

当它可用时，语法将如下所示：

.myclass! div { ... }

这将选择具有div元素作为子元素的.myclass元素。它基本上是一个普通的CSS选择器，但带有感叹号告诉它选择哪个元素。（虽然注意到首选语法在起草过程中已经改变了几次，但它们尚未最终确定！）

如果您有兴趣对此进行跟进，可以在此处阅读当前表单中的完整规范：http://dev.w3.org/csswg/selectors4/

然而，这是将来的。对于当前的浏览器，使用纯CSS无法实现您想要实现的目标。

那你有什么选择？

最明显的解决方法是使用javascript来达到你想要的效果。 jQuery完全能够按照你所描述的方式选择元素，如下所示：
```
$('.myclass:has(div)');
```
同样显而易见的是，要为要设置样式的元素添加一个类，并使用它。这可以在Javascript或服务器端代码中完成。可能是最明显的答案，实际上，在没有可以使用的实际CSS选择器的情况下。
根据您的尝试，您可以尝试重新安排HTML结构;在某些情况下，即使使用当前可用的CSS选择器，一些横向思维也可以帮助您获得看似这样做的结果。特别是，悬停效果通常可以通过这种方式解决。
同样，根据您的代码的样子以及您尝试使用它做什么，您可以尝试使用一些更深奥的CSS选择器。例如，div:empty将选择没有内容的div。这不适用于您给出的示例（因为您在“空”div中有文本），但在其他情况下它们确实是空的时可以使用。

Answer 2

可以通过两种方式完成： -

1）将特定类提供给父div，子div将继承该样式。

2）将课程单独授予div。

更好的选择是通过第一个选项实施。

Answer 3

使用“＆gt;”运营商。

Some documentation

赞div > div {}

http://jsfiddle.net/9tLXP/

div {
    padding: 10px;
    background: red;
}

div > div {
    padding: 10px;
    background: blue;
}

div > div > div {
    padding: 10px;
    background: orange;
}

div > div > div > div {
    padding: 10px;
    background: green;
}

编辑：很显然，我继续用不同的背景颜色设计每一个，以证明这一点。在您的情况下，您将删除我提供的一些额外样式。

Answer 4

如果你真的想要使用你发布的结构，没有为任何元素分配类或id的结构，那么你就无法准确地检测出有n个子元素的组中的底部元素。

像>这样的运算符可以给你一个直接的后代，但是他们无法告诉你它是否还有其他没有进一步循环的孩子，正如迈克尔所示。因此，使用Michaels方法的问题是你无法在第3级检测div，在第4级检测div并将它们设置为相同，因为级别3的所有div现在都继承了这种风格。

长而短 - 在没有添加类或2的情况下，你无法准确地检测到嵌套结构中最底层的子节点而不会影响它的兄弟节点。

CSS规则：为所有有孩子的人提供风格

4 个答案: