html - 如何将 nth-child() 规则合二为一？

Question

我目前有这个很长的规则

#content #wrapper table td:nth-child(3), 
#content #wrapper table td:nth-child(4), 
#content #wrapper table td:nth-child(5) {
     width: 30px;
}

是否可以将第 n 个孩子组合成更短的东西，nth-child(3,4,5)而不是 3 条单独的线？

score 7 · Accepted Answer

这应该可以解决问题：

#content #wrapper table td:nth-child(n+3):nth-child(-n+5) {
    width: 30px;
}

score 1 · Accepted Answer

不直接基于您的代码，但这应该给您一个想法。

ul li:nth-child(n+3):nth-child(-n+7){ }

score 1 · Accepted Answer

1

a:nth-child(4),+:nth-child(5){color:red}

于 2022-01-16T10:54:13.253 回答

score 0 · Accepted Answer

你可以试试

#content #wrapper table td:nth-child(n+3)

这将选择除前 2 个之外的所有内容。

score -3 · Accepted Answer

并不是说我知道我害怕。如果您正在寻找更少的代码以使其更易于维护，您可以尝试类似 SASS 的东西。

5 回答 5