CSS选择表中的前4个元素

Question

我只想选择下表中的前4列（以红色突出显示） 我该怎么办？

到目前为止，我已经尝试了以下方法，但这不是我想要的。

table.foobardate

table.foobardate> tr：not（：last-child）

谢谢！

Answer 1

选择器nth-child()：-n从头开始。 +4下4个。

td:nth-child(-n+4)

Answer 2

：nth-​​child

:nth-child选择器允许您根据公式根据源顺序选择一个或多个元素。它在CSS选择器第3级规范中定义为“structural pseudo-class”，这意味着它用于根据内容与父元素和同级元素的关系来设置样式。

假设我们正在建立一个CSS网格，并想删除每四个网格模块上的边距：

<section class="grid">
  <article class="module">One</article>
  <article class="module">Two</article>
  <article class="module">Three</article>
  <article class="module">Four</article>
  <article class="module">Five</article>
</section>

我们可以使用:nth-child：

，而不是向每四个项目（例如，last）添加一个类。

.module:nth-child(4n) {
  margin-right: 0;
}

如您所见，：nth-​​child有一个参数：它可以是一个整数，关键字“even”或“odd”或公式。如果指定了整数，则只会选择一个元素-但关键字或公式将遍历父元素的所有子元素并选择匹配的元素-类似于在JavaScript数组中导航项目。关键字“even”和“odd”很简单（分别为2、4、6等或1、3、5）。该公式是使用语法an + b构造的，其中：

  

“ a”是整数值
“ n”是原义字母“ n”
“ +”是   运算符，可以是“ +”或“-”
“ b”是整数，并且是   如果公式中包含运算符

，则为必需

参考：https://css-tricks.com/almanac/selectors/n/nth-child/