2

我有一个可能包含 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中可能吗？

在此先感谢您的帮助。

4

1 回答 1

0

这实际上很容易做到，通常人们使用 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])

于 2013-05-31T18:35:07.447 回答