Question

我有一个DIV元素，可能包含1或2 Child DIVs

有没有办法说明1 Child element，那么填充应为15px，否则为5px

可能喜欢

<div class="container">
   <div><strike>7.00</strike></div>
   <div>5.00</div>
</div>

或

<div class="container">
   <div>7.00</div>
</div>

Answer 1

你可以在儿童中使用保证金来获得相同的效果：

.container div:only-child {
  margin: 15px;
}

div {
  border: solid 1px red;
}

div div {
  margin: 0 5px;
  border-color: green;
  background: #ccc;
}

div div:first-child {
  margin-top: 5px
}

div div:last-child {
  margin-bottom: 5px
}

<div class="container">
  <div><del>7.00</del></div>
  <div>5.00</div>
</div>


<div class="container">
  <div>7.00</div>
</div>

PS 使用不推荐使用的del代码strike

Answer 2

不，没有。

CSS确实有一些复杂的quantity queries，但这些只会根据数字来设置 children 的样式。

由于没有Parent Selector

，因此（目前）无法根据子项数设置父的样式

Answer 3

基于这个原始线程的年代，我没有提供确切的解决方案，但是，CSS Tricks 将一篇很棒的文章放在一起，介绍了逻辑 CSS 样式。你可以find the article here。

根据子元素的数量设置填充

3 个答案: