html - 纯 CSS : Select elements that have n or more siblings

Question

我想在有多个兄弟的基础上选择一些元素，比如:

• 在表格中，当行数超过给定数量时(例如，有等于或超过 3 个同级 <tr> 元素)我想选择所有行(不是表格)
• 包含超过给定数量的元素的列表(例如，有等于或超过 3 个兄弟 <li> 元素)我想选择所有元素(不是列表)

我知道有 :not(:only-child) (见 https://stackoverflow.com/a/34624032/79485 )但我想要类似的东西

tr:min-siblings(3) {
    color: blue;
}

我可以使用 sibling 的数量作为所有 sibling 的选择器吗？

注意:这次我正在寻找仅 CSS 的解决方案。

Answer 1

这可以通过一种技术实现，在 Lea Verou 的博客 CSS secret 中对此有很好的描述:Styling Elements based on sibling count .

它基于以下观察:
如果你知道第一个元素也是倒数第三个元素，你也知道一共有三个 sibling 。

您现在要做的就是选择第一个和倒数第三个元素及其所有后续元素。

tbody > tr:first-child:nth-last-child(3),
tbody > tr:first-child:nth-last-child(3) ~ tr {}

我对此做了一点增强，使其更加动态，并在此代码笔中制作了一个 SCSS 混入

mixin如下:

// SCSS
@mixin yuboo-childcount($count, $element, $element-selective: null, $rest: false) {
  $el: $element;
  $els: $element;
  @if $element-selective {
    $els: $element-selective;
  }
  $co: $count;
  @if $rest {
    $co: n + #{$count};
  }

  @if $count == 1 {
    & > #{$els}:first-child:nth-last-of-type(#{$co}) {
      @content;
    }
  } @else {
    & > #{$els}:first-child:nth-last-of-type(#{$co}),
    & > #{$el}:first-child:nth-last-of-type(#{$co}) ~ #{$els} {
      @content;
    }
  }
}

如果我这样包含它:

tbody {
  @include yuboo-childcount('3', tr) {
    /* my rules */
  }
}

它产生:

tbody > tr:first-child:nth-last-of-type(3), 
tbody > tr:first-child:nth-last-of-type(3) ~ tr {
  /* my rules */
}

你的例子

tr:min-siblings(3) {
    color: blue;
}

我的解释是:对于 tbody 中的每个 tr，color 应该设置为 blue，当tbody中有3个或3个以上的tr时，解决方法如下:

tbody {
  @include yuboo-childcount('n+3', tr) {
    color: blue;
  }
}

成为这个 CSS

tbody > tr:first-child:nth-last-of-type(n+3), 
tbody > tr:first-child:nth-last-of-type(n+3) ~ tr {
  color: blue;
}

检查这个例子

tr {
  color: red;
  background-color: pink;
}
tbody > tr:first-child:nth-last-of-type(n+3), 
tbody > tr:first-child:nth-last-of-type(n+3) ~ tr {
  color: blue;
  background-color: lightblue;
}

td {
  background-color: inherit;
  border: 1px solid gold;
  padding: 10px;
}

table {
  border: 1px solid gold;
  padding: 0;
  margin: 10px;
  border-collapse: collapse;
}

<table>
  <tr><td>1</td></tr>
</table>

<table>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
</table>

<table>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
</table>

<table>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
</table>

<table>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
  <tr><td>5</td></tr>
</table>

<table>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
  <tr><td>5</td></tr>
  <tr><td>6</td></tr>
</table>