缩短CSS代码

Question

如何缩短CSS的代码？当它在移动视图中时，它将隐藏表的一些列。我的表有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

你可以隐藏所有，再次显示第13和下一个。

#data tr > * {display: none}
#data tr > *:nth-child(12) ~ * {display: table-cell}

tr > *兼收并蓄，td和th，没有其他孩子可以在tr。13和其他(:nth-child(12) ~ *)被设置为默认的table-cell值。

Answer 2

下面的代码将选择在第5次之后的每个:n-子。

​

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

​

另外，这里有一篇关于第n个子选择器的很好的文章：https://css-tricks.com/useful-nth-child-recipies/。

Answer 3

您可以在所有非移动列上添加一个类，然后使用类选择器来隐藏它们，而不是第n个子选择器。