CSS规则：为所有有孩子的人赋予样式[重复]

Posted 2023-03-06

【中文标题】CSS规则：为所有有孩子的人赋予样式[重复]

【英文标题】：CSS Rule: Give style to all with children [duplicate]

【发布时间】：2013-03-03 07:57:02

【问题描述】：

我试图为所有有孩子的<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>

【问题讨论】：

webdesign.about.com/od/css/qt/tipcssmulticlas.htm

@Zlatan，你的意思是给最后的孩子加班？这将是最简单的解决方案，但当结构变得更复杂时会非常难看

w3schools.com/cs-s-ref/sel_last-child.asp

@ZlatanO。 — 选择其父元素中的最后一个子元素。它与被选择的元素有多少孩子无关。

【参考方案1】：

使用“>”运算符。

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;

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

【讨论】：

这将为除了外部 div 之外的所有内容设置样式，包括最深的孩子

问题是如何设置 divs with children，而不是 divs that are children div.

@Quentin 根据他的问题的第二部分：“或者，给所有人一种风格，给那些没有孩子的人一种不同的风格。”我不敢苟同。在这种情况下，我的解决方案将起作用。

@Michael — 作为根元素子元素的 div 子元素的所有 4 个 div 将与您的代码获得相同的样式。该问题要求第一个和最后一个的样式与中间两个不同。

【参考方案2】：

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

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

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

【参考方案3】：

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 中有文本），但适用于它们确实为空的其他情况。

【参考方案4】：

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

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

2) 分别给 div 上课。

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