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

Question

我需要格式化几个<td>在 CSS 中。

代替

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伪选择器

The :matches pseudo-class is described as a functional pseudo-class by the official CSS Selectors Level 4 specifications. It doesn't serve any purpose in itself except making some complex selectors lighter by allowing them to be grouped. In a way, we can think as :matches as syntactic sugar.

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

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

• Mozilla:-moz-any

• Chrome:-webkit-any

这里是浏览器支持

• Chrome :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/