如何根据元素的兄弟数量应用 css 规则？ [复制]答案

【问题标题】：How to apply a css rule based on the number of siblings an element has? [duplicate]如何根据元素的兄弟数量应用 css 规则？ [复制]
【发布时间】：2013-05-27 15:31:06
【问题描述】：

我有一个可能包含 1、2 或 3 个子元素的元素：

<div class="wrapper">
  <div class="element" />
</div>

或者...

<div class="wrapper">
  <div class="element" />
  <div class="element" />
</div>

或者...

<div class="wrapper">
  <div class="element" />
  <div class="element" />
  <div class="element" />
</div>

我想根据兄弟姐妹的数量对 .element 应用样式。

例如，类似...

.wrapper .element {
width: 50%;
}

.wrapper .element:only-child {
width: 75%;
}

...但我无法弄清楚如何区分 2 个元素和 3 个元素。这在纯 css 中可能吗？

感谢（提前）您的帮助。

【问题讨论】：

目前还没有纯 CSS 解决方案（据我所知）。然而，它可以通过一些 HTML 更改或 JavaScript 来完成。
如果子元素的数量经常变化不想添加data-属性，请使用jQuery

标签： html css stylesheet

【解决方案1】：

这实际上很容易做到，通常人们使用 html 中的 data 属性 [thanks @david-thomas] 来完成：

DIV 包装器和子代：

<div class="wrapper" data-wrapper-subs="3">
    <div class="some-class">Child 1</div>
    <div class="some-class">Child 2</div>
    <div class="some-class">Child 3</div>
</div>

还有它的 CSS：

div.wrapper[data-wrapper-subs="1"] div { width: 99%; }
div.wrapper[data-wrapper-subs="2"] div { width: 49%; }
div.wrapper[data-wrapper-subs="3"] div { width: 32%; }
div.wrapper[data-wrapper-subs="4"] div { width: 24%; }
div.wrapper[data-wrapper-subs="5"] div { width: 19%; }

div.wrapper div.some-class { /* Generic child styling */ }

重要的是将data-wrapper-subs设置为孩子的数量。

如果你不知道孩子的数量显然这是行不通的，但据我所知，你只能基于 :first-child, :last-child, :only-child, :nth- 设置样式child(odd), :nth-child(even) 和 :nth-child([number])

【讨论】：

一点JS动态添加数据元素就可以解决不知道有多少孩子的问题
data-* 是元素的属性，而不是元素本身。 =)
@Dre 你可以使用 JS 来做到这一点，是的，我倾向于回避需要 JS 才能正确查看的解决方案，尽管关闭它的人可能会看到无法使用的视图。
@david-thomas 谢谢，更新了我的答案！
@david-thomas 我同意；我还将确保有相关的后备样式以确保它是可见的（例如将所有宽度默认为 100%）。我必须避免留下过于简洁的cmets！在现实世界的场景中，我会回避这种布局；它