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

【问题标题】：Select all except first and last td element in one selector在一个选择器中选择除第一个和最后一个 td 元素之外的所有元素
【发布时间】：2020-08-12 00:38:29
【问题描述】：

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

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

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

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

【问题讨论】：

如果代码不正确，为什么会起作用？ “现在的浏览器对错误不敏感”:not(:first-of-type) 与> td 结合使用，您不必担心是否存在IE7 错误，因为无论您做什么它都不会起作用。你的语法是正确的。

【解决方案1】：

这可能会有所帮助

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

【讨论】：

【解决方案2】：

正如一些人所提到的，td:first-child 选择父 TR 的第一个子元素（如果它是 TD），而 td:first-of-type 选择第一个 TD 而不管之前可能出现的任何 TH它。

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

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

我认为它应该以这种方式运作良好。即使您想为TH 和TD 分别设置代码，您也可以像th:not(:first-child) 和td:not(:first-child) 那样做。

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：