如何在没有 JS 或 flexbox 的情况下根据 CSS 中的总数选择所有列表元素？

Question

假设我有一个包含 n 项的列表，我想将第一个列表项的宽度设为“rowspan=2”。宽度会根据n的数量而变化，但在下面的例子中：

<ul>
  <!-- <li>Row-2-1</li>-->
  <li class="ui-grid-span-2">SPAN 2</li>
  <li>Row 2-3</li>
  <li>Row 2-4</li>
  <li>Row 2-5</li>
  <li>Row 2-6</li>
</ul>

这会改变这一点：

|-----------------------------------|
|  1  |  2  |  3  |  4  |  5  |  6  |
|-----------------------------------|

到这里：

|-----------------------------------|
|  1  |   SPAN2   |  4  |  5  |  6  |
|-----------------------------------|

我原来的六个项目现在减少到五个（四个常规项目，一个跨越两个）。所以我这样写我的选择器：

ul > li:nth-child(-n+5).ui-grid-span-2 {
  width: 33.33%;
}

但它不起作用。相反，此规则适用：

ul > li:nth-child(-n+2).ui-grid-span-2 {
    width: 66.66%;
}

我不明白为什么。

问题：
我如何直接解决“五个孩子的所有孩子，一个有班级：ui-grid-span-2”。这意味着，不是所有单元格都是 1/6 宽度 = 16.66%，而是分配了类的单元格应该是 2/6 = 33.33%。

编辑...： 这不是this questions 的欺骗。 Vera 的解决方案允许根据兄弟姐妹的单元格总数设置宽度（此处不适用，因为如果第 3 个单元格是 rowspan=2，我只能设置以下单元格的宽度，而不是前面的单元格）。最初的解决方案需要为每个单元格编写一行代码（如果 n=10 max），然后为每个 *-span class= 一大堆 CSS 执行此操作。

回答：
找出原因。选择器是“贪婪的”=“采取前七个”将包括/覆盖“采取前六个”。解决方案如下。

Answer 1

Flexbox 似乎是一个解决方案，尽管实际问题似乎不清楚。

ul {
  margin: 0;
  list-style: none;
  padding: 0;
  display: flex
}
li {
  border: 1px solid grey;
  flex-grow: 1;
}
.ui-grid-span-2 {
  flex-grow: 2;
}

<ul>
  <li class="ui-grid-span-2">SPAN 2</li>
  <li>Row 2-3</li>
  <li>Row 2-4</li>
  <li>Row 2-5</li>
  <li>Row 2-6</li>
</ul>

Answer 2

* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
li {
    text-align: center;
    display: inline-block;
    width: 16.6%;
    background-color: red;
}
li:last-child, li:first-child, li:nth-child(3) {
    background-color: brown;
}
.ui-grid-span-2 {
    width: 32.2%;
}

<ul>
    <li class="ui-grid-span-2">SPAN 2</li><li>
    Row 2-3</li><li>
    Row 2-4</li><li>
    Row 2-5</li><li>
    Row 2-6</li>
</ul>

我认为你不能在没有 JS 或 flex 的情况下为大量 < li > 做你想做的事

Answer 3

好的，经过更多的干预，我最初的想法奏效了。这意味着如果您有以下 HTML：

<ul class="grid-items">
  <!-- <li>Row 1-1</li> -->
  <li class="ui-grid-span-2">SPAN 2</li>
  <li>Row 1-3</li>
  <li>Row 1-4</li>
  <li>Row 1-5</li>
  <li>Row 1-6</li>
</ul>

列表元素的宽度可以按我的意愿设置：

ul > li:nth-child(-n+4).ui-grid-span-2 {
  width: 33.33%;
}
ul > li:nth-child(-n+3).ui-grid-span-3 {
  width: 50%;
}
ul > li:nth-child(-n+2).ui-grid-span-4 {
  width: 66.66%;
}
ul > li:nth-child(-n+1).ui-grid-span-5 {
  width: 83.33%;
}

请注意，通过跨越多个单元格，单元格的总数也会发生变化，因此必须根据跨越的单元格调整伪选择器。为了使其适用于多个单元格范围（并不总是如上所述的 6 个单元格），还需要在列表元素上添加一个类以记录一行中的单元格数。否则较大的选择器（取前 8 项）将覆盖/封装较小的选择器（取前 7 项）。

仍然对它不满意，并且每行只支持一个 rowspan，但是......它可以工作并且它没有使用上述任何建议的解决方案（~ 兄弟，x*y 单元格 * n 行跨度规则，f​​lexbox 或表）。请记住，常规单元格宽度声明也需要修改，因为使用 rowspan 的行将具有较少的单元格数量，但需要原始预期数量的单元格宽度。

最多 8 个单元格网格的最终 CSS（为了便于理解，我没有合并声明）。

注意：
- ROWSPAN 部分是相关部分
- 在我确保单元格宽度是根据预期的而不是实际的单元格数设置之前
- 选择器的相关性被截断。

/* base width */
ul > li {
  width: auto;
}

/* "cell width" */
ul > li:first-child:nth-last-child(1) {
  width: 100%;
}
ul > li:first-child:nth-last-child(2),
ul > li:first-child:nth-last-child(2) ~ li {
  width: 50%;
}
ul.ui-grid-column-3 > li:first-child:nth-last-child(n),
ul.ui-grid-column-3 > li:first-child:nth-last-child(n) ~ li  {
  width: 33.3333%;
}
ul.ui-grid-column-4 > li:first-child:nth-last-child(n),
ul.ui-grid-column-4 > li:first-child:nth-last-child(n) ~ li {
  width: 25%;
}
ul.ui-grid-column-5 > li:first-child:nth-last-child(n),
ul.ui-grid-column-5 > li:first-child:nth-last-child(n) ~ li {
  width: 20%;
}
ul.ui-grid-column-6 > li:first-child:nth-last-child(n),
ul.ui-grid-column-6 > li:first-child:nth-last-child(n) ~ li {
  width: 16.667%;
}
ul.ui-grid-column-7 > li:first-child:nth-last-child(n),
ul.ui-grid-column-7 > li:first-child:nth-last-child(n) ~ li {
  width: 14.285714286%;
}
ul.ui-grid-column-8 > li:first-child:nth-last-child(n),
ul.ui-grid-column-8 > li:first-child:nth-last-child(n) ~ li {
  width: 12.5%;
}

/* ROWSPAN */
/* 3 cells */
ul.ui-grid-column-3 > li:nth-child(-n+2).ui-grid-span-2 {
  width: 66.666%;
}
/* 4 cells */
ul.ui-grid-column-4 > li:nth-child(-n+3).ui-grid-span-2 {
  width: 50%;
}
ul.ui-grid-column-4 > li:nth-child(-n+2).ui-grid-span-3 {
  width: 75%;
}
/* 5 cells */
ul.ui-grid-column-5 > li:nth-child(-n+4).ui-grid-span-2 {
  width: 40%;
}
ul.ui-grid-column-5 > li:nth-child(-n+3).ui-grid-span-3 {
  width: 60%;
}
ul.ui-grid-column-5 > li:nth-child(-n+2).ui-grid-span-4 {
  width: 80%;
}
/* 6 cells */
ul.ui-grid-column-6 > li:nth-child(-n+5).ui-grid-span-2 {
  width: 33.33%;
}
ul.ui-grid-column-6 > li:nth-child(-n+4).ui-grid-span-3 {
  width: 50%;
}
ul.ui-grid-column-6 > li:nth-child(-n+4).ui-grid-span-4 {
  width: 66.66%;
}
ul.ui-grid-column-6 > li:nth-child(-n+4).ui-grid-span-5 {
  width: 83.33%;
}
/* 7 cells */
ul.ui-grid-column-7 > li:nth-child(-n+6).ui-grid-span-2 {
  width: 28.571428571%;
}
ul.ui-grid-column-7 > li:nth-child(-n+5).ui-grid-span-3 {
  width: 42.857142857%;
}
ul.ui-grid-column-7 > li:nth-child(-n+4).ui-grid-span-4 {
  width: 57.142857142%;
}
ul.ui-grid-column-7 > li:nth-child(-n+3).ui-grid-span-5 {
  width: 71.428571428%;
}
ul.ui-grid-column-7 > li:nth-child(-n+2).ui-grid-span-6 {
  width: 85.714285714%;
}

/* 8 cells */
ul.ui-grid-column-8 > li:nth-child(-n+7).ui-grid-span-2 {
  width: 25%;
}
ul.ui-grid-column-8 > li:nth-child(-n+6).ui-grid-span-3 {
  width: 37.5%;
}
ul.ui-grid-column-8 > li:nth-child(-n+5).ui-grid-span-4 {
  width: 50%;
}
ul.ui-grid-column-8 > li:nth-child(-n+4).ui-grid-span-5 {
  width: 62.5%;
}
ul.ui-grid-column-8 > li:nth-child(-n+3).ui-grid-span-6 {
  width: 75%;
}
ul.ui-grid-column-8 > li:nth-child(-n+2).ui-grid-span-7 {
  width: 87.5%;
}

/* responsive */
@media (max-width: 32em) {
ul > li,
ul[class*="ui-grid-column"] > li {
    width: 100%;
  }
}