只有具有特定数量子元素的容器的 css 样式答案

【问题标题】：Only ccs styling of container which has specific number of children elements只有具有特定数量子元素的容器的 css 样式
【发布时间】：2021-12-14 09:09:11
【问题描述】：

是否有任何特定的 CSS 选择器来设置包含特定数量子项的容器样式。例如：

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

所以我需要申请 'justify-content: flex-start;' .container 仅当它有 1、5、6 或 7 个孩子时。在其他情况下，它必须包含 'justify-content: center;'属性

【问题讨论】：

使用javascript？
您知道要渲染的项目数吗？
- 我想知道是否可以在没有 JS 的情况下实现这一点。 - 我有提到的一组数字。
nop，CSS 是关于样式的，并且从来没有看到 dom 使用它。如果必须即时对其进行整理，这是一项 javascript 工作，否则，请在标记中使用属性，以便可以从中应用 CSS。
你对一些黑客没问题吗？我可能会为您的具体情况提供解决方案

标签： css css-selectors frontend web-frontend

【解决方案1】：

如果您知道要渲染的项目数量，请将其添加为数据属性并将其用于样式。

.container {
  justify-content: center;
}

.container[data-itemcount="1"],
.container[data-itemcount="5"].,
.container[data-itemcount="6"],
.container[data-itemcount="7"] {
  justify-content: flex-start;
}

<div class="container" data-itemcount="3">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

<div class="container" data-itemcount="4">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

<div class="container" data-itemcount="5">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

<div class="container" data-itemcount="7">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

【讨论】：

谢谢。我有这个办法。但是是否有一些特定的解决方案选择器。无需额外修改模板，使用JS等？
不，您可以针对容器中的特定子项，但不能仅从其内容中的 css 中针对容器。它只是“由外而内”，从不“由内而外”。
所以使用 data-attribute 实现将是最好的。谢谢。