css - 在一个选择器中选择除第一个和最后一个 td 元素之外的所有元素

Question

我在 CSS 中写了这样的东西：

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

我正在尝试将此应用于表格单元格，这些表格单元格不是第一个也不是最后一个.red类。

它似乎按预期工作，但这真的是正确的方法吗？

score 23 · Accepted Answer

23

可能这会有所帮助

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

于 2012-11-10T05:39:22.730 回答

score 10 · Accepted Answer

正如一些人所提到的，如果它是 a ，则选择td:first-child父元素的第一个子元素，而选择第一个子元素，而不管它之前可能出现的任何子元素。TRTDtd:first-of-typeTDTH

因此，如果您TH的行中有任何元素，您的代码不会为您提供所有不是第一个或最后一个的单元格。

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

我认为它应该以这种方式运作良好。即使您想为THand提供单独的代码TD，您也可以像th:not(:first-child)and那样做td:not(:first-child)。

通常，:first-of-type当您想要为标签名称的第一个实例设置样式时（如p:first-of-type），它会更直观。

score 4 · Accepted Answer

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

它也具有预期的含义，因为这就是选择器的组合方式。您可以使用:not(...)选择器来表达类型为“not ... and not ...”的条件。

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

3 回答 3