css选择器nth-child如何应用于数组？

Question

我需要在css中格式化一些<td>。

而不是

td:nth-child(4), td:nth-child(6), td:nth-child(7){
    padding-right:15px;
}

我们可以做td:nth-child(4,6,7)吗？

Answer 1

在css4中，您可以使用:matches伪选择器

  

：匹配伪类被官方CSS选择器4级规范描述为功能伪类。除了通过允许对一些复杂的选择器进行分组之外，它本身没有任何用途。在某种程度上，我们可以认为：匹配为语法糖。

:matches(:nth-child(4), :nth-child(5), :nth-child(6)) td {
  padding-right: 15px;
}

注意，您可能必须使用以下供应商前缀

• Mozilla：-moz-any

• Chrome：-webkit-any

以下是浏览器支持

• Chrome：12 +
• Firefox：5 +
• 歌剧：15 +
• IE：不支持

参考

http://css4-selectors.com/selector/css4/matches-any-pseudo-class/

https://css-tricks.com/almanac/selectors/m/matches/

http://red-team-design.com/meet-the-css4-selectors/

https://drafts.csswg.org/selectors/

Answer 2

您可以使用：nth-​​child（an + b），其中a和b是常量，'n'是变量。

请参阅http://www.w3schools.com/cssref/sel_nth-child.asp。

这仅适用于重复可以使用此表单计算的列。