css - 缩短 CSS 代码

Question

如何缩短这段 CSS 的代码？当它在移动 View 中时，它将隐藏表格的某些列。我的表有 137 列，我只想查看 5 列。

@media only screen and (max-width: 800px) {
        #data th:nth-child(2),
        #data td:nth-child(2),
        #data th:nth-child(3),
        #data td:nth-child(3),
        #data th:nth-child(5),
        #data td:nth-child(5),
        #data th:nth-child(6),
        #data td:nth-child(6),
        #data th:nth-child(7),
        #data td:nth-child(7),
        #data th:nth-child(8),
        #data td:nth-child(8),
        #data th:nth-child(9),
        #data td:nth-child(9),
        #data th:nth-child(10),
        #data td:nth-child(10),
        #data th:nth-child(11),
        #data td:nth-child(11),
        #data th:nth-child(12),
        #data td:nth-child(12) {display:none;}
  }

Answer 1

下面的代码将选择第 5 个之后的每个 :nth-child..

@media only screen and (max-width: 800px) {
        #data th:nth-child(n+5){
           display:none;
        }
  }

此外，我还有一篇关于第 n 个子选择器的精彩文章:https://css-tricks.com/useful-nth-child-recipies/