Select all except first and last td element in one selector

Question

I wrote something like this in CSS:

tr.red > td:not(:last-of-type):not(:first-of-type)
{
    color: #E53B2C;
    border-bottom: 4px solid #E53B2C;
}

I'm trying to apply this to table cells, which are not first and not last in the row with .red class.

It seems to work as expected, but is this really the right way to do it?

Answer 1

可能这会有所帮助

tr.red  td:not(:first-child):not(:last-child)
{
//your styles
}

样品

Answer 2

正如一些人所说,td:first-of-type为你提供第一个TD,其中td:first-child选择该tR的第一个子元素(如果它是TD).这意味着,如果您有任何TH,您的代码将不会为您提供所有不是第一个或最后一个的单元格.

tr.red > *:not(:last-child):not(:first-child)
    { /* ... your css code ... */ }

我认为它应该以这种方式运作良好.即使你想为TH和TD分别设置代码,你也可以这样做:不是(:first-child)和td:not(:first-child).当你想要找到第一个带有一些标签名称的元素时,你的代码会更好,比如p:first-of-type,并给它一些不同的风格.

Answer 3

它在语法上是正确的，因为您可以使用W3C CSS Validator快速检查。已知验证器存在错误，因此原则上，您应该根据 CSS 规范检查规则，尤其是Selectors Level 3。结果仍然是，是的，是正确的。

\n\n

它也具有所需的含义，因为这就是选择器的组合方式。您可以使用:not(...)选择器来表达 \xe2\x80\x9cnot ... 和 not ...\xe2\x80\x9d 类型的条件。

\n\n

如果tr元素的所有子元素都是，则这适用td。如果存在标题单元格，th即也有元素，则选择器适用于那些td不是具有类的行中的第一个数据单元格或最后一个数据单元格的数据单元格（元素） .red。

\n