根据 div 中的项目数使用 css 设置 css 属性

Question

CSS3 是否可以仅使用 CSS 格式化父div 的子div，如下所示：

1. 当有 3 个div 时，在div 1 和 2 上设置属性 x。
2. 当有 2 个div 时，在div 1 上设置属性 x
3. 当有 1 个div 时，在div 1 上设置没有属性 x

还是我必须使用jquery来执行此动态逻辑？

Answer 1

.parent div {
  height: 1em;
  width: 1em;
  background: red;
  margin: 0.5em;
}
.parent div:last-child {
  background: green;
}

<div class="parent">
  <div></div>
  <div></div>
  <div></div>
</div>
<hr />
<div class="parent">
  <div></div>
  <div></div>
</div>
<hr />
<div class="parent">
  <div></div>
</div>

我认为你可以用纯 css 解决你的问题。

想想最后一个子选择器：http://www.w3schools.com/cssref/sel_last-child.asp

将所有子项的样式都相同，但对最后一个子项应用其他样式。

所以在 3div 的情况下，第三个div 将获得最后一个子级样式在 2div 的情况下，第二个孩子将获得最后一个孩子样式等。

Answer 2

你不能用css做到这一点。这是一个jQuery解决方案，导致在父div上设置一个类（例如'has-3-child'）。

var yourDivElement = $('.your-div-class');
yourDivElement.addClass('has-' + yourDivElement.find('.children-div-class').length + '-children');

然后，您可以根据该类定位和应用特定样式。