css selector 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 pseudoselector

的：匹配伪类是由官方CSS选择4级的规格描述为一个功能伪类。除了通过允许将它们分组而使一些复杂的选择器更轻以外，它本身不起任何作用。在某种程度上，我们可以认为：匹配就像语法糖。

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

注意，你可能需要使用下面的供应商前缀

• 的Mozilla：-moz-any

• 铬：-webkit-any

这里是浏览器支持

• 铬：12+
• 火狐：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

您可以使用：第n个孩子（一个+ B），其中a，b为常数和 'n' 是一个变量。

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

这只有帮助重复可以使用此表单计算的列。