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

下面的代码将选择每个：第五个之后的第n个孩子..

＆＃13;

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

＆＃13;

另外，这里有关于nth-child选择器的精彩文章：https://css-tricks.com/useful-nth-child-recipies/

Answer 2

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

Answer 3

您可以隐藏所有内容，然后再次显示第13个和下一个。

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

tr > *同时使用td和th，其他任何孩子都不能tr。并且第13个和其他（:nth-child(12) ~ *）设置为默认table-cell值。

Answer 4

检查一下，这是一个快速的解决方案，如果你喜欢它，你可以阅读n-child选择器here

ul li:nth-child(-n+10) {
    display: none;
}

<ul>
  <li> testing  </li>
  <li> testing  </li>
  <li> testing  </li>
  <li> testing  </li>
  <li> testing  </li>
  <li> testing  </li>
  <li> testing  </li>
  <li> testing  </li>
  <li> testing  </li>
  <li> testing  </li>
  <li> testing  </li>
  <li> testing  </li
    ><li> testing  </li>
  <li> testing  </li>
  <li> testing  </li>
</ul>

缩短CSS代码

4 个答案: