Question

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

先谢谢你的帮助。

Answer 1

这实际上很容易做到，通常人们在html中使用数据属性[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]）

如何根据元素的兄弟姐妹数量应用css规则？

1 个答案: