0

我试图给所有<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>

4

4 回答 4

4

CSS 级别 4 正在开发中，将包括可以满足您要求的选择器。

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

.myclass! div { ... }

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

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

然而那是在未来。对于当前的浏览器，纯 CSS 无法实现您想要实现的目标。

那么你有什么选择呢？

  • 最明显的变通方法是使用 javascript 来实现您想要的效果。jQuery 完全能够以您所描述的方式选择元素，如下所示：

    $('.myclass:has(div)');

  • 同样明显的是将一个类添加到您想要设置样式的元素中，然后使用它。这可以在 Javascript 或您的服务器端代码中完成。实际上，在没有您可以使用的实际 CSS 选择器的情况下，这可能是最明显的答案。

  • 根据您要执行的操作，您可以尝试重新排列 HTML 结构；在某些情况下，一些横向思考可以帮助您获得似乎可以做到这一点的结果，即使使用当今可用的 CSS 选择器也是如此。特别是，悬停效果通常可以通过这种方式解决。

  • 同样，根据您的代码的外观以及您尝试使用它做什么，您可以尝试使用一些更深奥的 CSS 选择器。例如，div:empty将选择没有内容的 div。这不适用于您给出的示例（因为您在“空” div 中有文本），但在它们确实为空的其他情况下会起作用。

于 2013-03-14T19:40:24.717 回答
1

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

1）给父div一个特定的类，子div将继承样式。

2) 分别给 div 上课。

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

于 2013-03-14T21:40:08.767 回答
0

如果您真的希望使用您发布的结构，即没有为任何元素分配类或 id 的结构，那么您将无法准确检测具有 n 个子项的组中的底部元素。

诸如此类的运算符>可以为您提供直系后代，但他们无法告诉您它是否还有没有其他循环的其他子代，如迈克尔所示。因此，Michaels 方法的问题是您无法检测到级别 3 的 div 和级别 4 的 div 并将它们的样式设置为相同，因为级别 3 的所有 div 现在都继承了这种样式。

长而短 - 如果不添加一个或 2 个类，您将无法准确检测嵌套结构的最底部子级而不影响它的兄弟姐妹。

于 2013-03-14T19:30:52.273 回答
0

使用“>”运算符。

一些文档

喜欢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;
}

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

于 2013-03-14T19:19:35.620 回答