css - 许多子标签的 css 选择器

Question

我知道可以这样做：

#details > tbody > tr > td:last-child > input ,
#details > tbody > tr > td:last-child > select
{
...
}

有没有更好的办法？更接近于：

#details > tbody > tr > td:last-child > (input, select)
{
...
}

Answer 1

不，没有这样的事。此外，您的选择器资格过高，这会导致性能不佳。

如果您想使用更具表现力的语言来编写 CSS，请改用SCSS。

Answer 2

不，CSS 不提供这样的东西。CSS 预处理器（Sass、LESS 等）可以使编写这样的选择器变得更简单，但生成的 CSS 将完全是您已经拥有的。

#details > tbody > tr > td:last-child {
    > input, > select {
        // styles
    }
}

Answer 3

如果没有更多上下文，答案是否定的。对于特定示例，可以编写更短的等效选择器，例如

#details > tbody > tr > td:last-child > :not(div)

但是您应该避免这种情况，因为它会导致样式脆弱（当您的标记更改时容易引入意外效果）。

随心所欲。