是否有特定于 tr 行的 CSS 选择器的语法？

Question

我正在为 HTML、CSS、JS 考试而学习，并找到了各种资源来帮助我学习。在做练习测验时，我发现了一个关于 tr 行 CSS 选择器的问题：

小测验告诉我选项 B 是正确的。

根据我的研究，没有 [line |-0,1,3] 选择器语法这样的东西。

我想验证这个语法是否正确，或者我说这是测验部分的错误是否正确。

我已经在 codepen.io 编辑器中对此进行了测试，该编辑器也不起作用，可在此处找到：http://codepen.io/anon/pen/dPwwpB?editors=110

tr [line |- 0,1,3] {
  background-color: blue;
}

最后如果这个语法不正确，能不能也确认一下语法是否正确？（HTML 为清楚起见，排除在此 post 之外，但可在 Codepen link 上找到）

Answer 1

对于您的具体情况，您的答案绝对是正确的选择，[line |- whatever] 是不正确的 CSS 语法。

一般来说，唯一正确的 CSS 语法是 selector:specific-something、selector:specific(something) 或 selector[attr=val]。其他任何看起来不同的地方都可能是错误的（除非您使用的是 CSS 预处理器）。

Answer 2

~~你codepen上的HTML与问题不符——“Adjustable Race”在哪里row/caption/whatever?~~

也就是说，如果“Product”是 thead 中唯一的 tr，而“Adjustable Race”和“Down Tube”是 tr 中的第一个和最后一个 tr =13=]，那么答案C应该是正确的。

tr [line |- 0,1,3] 似乎没有任何意义 – 即使是意味着 attribute selector，line属性必须在 td 元素上（因为 tr 和 [ 之间的 space），但是在您的 HTML（并且 HTML 中不存在 line 属性），并且 |- 必须是 |=.

Answer 3

如前所述，选项 C tr:first-of-type, tr:last-of-type 是正确答案，但前提是行在语义上分为 thead 和 tbody 元素，因为选项 A 似乎暗示。

下面是如何根据上述假设匹配每个所需元素的说明：

tr:first-of-type, tr:last-of-type {
  background-color: lightblue;
}

<table>
  <thead>
    <tr><th>Product         <!-- tr:first-of-type, tr:last-of-type -->
  <tbody>
    <tr><td>Adjustable Race <!-- tr:first-of-type -->
    <tr><td>Blade
    <tr><td>Chainring
    <tr><td>Down Tube       <!-- tr:last-of-type -->
</table>

假设 thead 和 tbody 除了 tr（例如 template 或 script）没有其他 children， tr:first-child, tr:last-child 也可以。请注意，选项 D 是不正确的，因为它使用 :first-line pseudo-element 和遗留 single-colon 语法，而不是 :first-child pseudo-class，而且 [=21] =] pseudo-element 在 table-row 元素上没有意义。

选项 B 不正确，因为没有这样的语法。其他人提出了一个很好的观点，因为这种语法对于 selector 没有意义，因为它似乎使用带有名为 "lines" 的 non-existent 属性的属性语法，然后是垃圾伪装成某种运算符，后跟无效值语法，最重要的是整个 "attribute selector" 前面有一个后代组合符，即使 selector 应该以 tr 元素为目标，并且不是他们的后代。我同意 CBroe 的评论，因为它可能只是为了混淆 - 尽管它确实让人怀疑测试 setter 是否可以故意将其标记为巨魔的正确答案...

此外，表格没有 "lines" 的概念；他们有 "rows" 相反，所以调用这样的 select 或 "line" 是非常粗心的（虽然，再一次，我们有 :link 用于未访问的链接和 :visited 对于已访问的链接，which has come back to bite us now).

您可能想知道除了基本的 :*-of-type pseudo-class 之外是否还有任何特殊的 select 或匹配 table-row 元素的语法。不，没有。这是因为 HTML 是一种 row-primary 标记语言，这意味着行以行元素（因此 tr）和列的形式表示由一系列单元格元素暗示。因此，当基本结构 pseudo-classes 可以很好地满足此目的时，几乎不需要创建特殊的 selectors 来匹配行。

但是，不可能根据行语义将单元格相互匹配，尤其是考虑到单元格可以通过 rowspan 属性跨越多行。例如，您不能在相对于某个 multi-row 单元格的特定列中写入 select 或匹配单元格，除非您 select 该单元格出现的特定行，这通常需要标记的先验知识以及该结构不会改变的假设。这可能会随着 Selectors 4 中引入的 :has() pseudo-class 得到改进，但在这种情况下将如何使用它，或者是否可以使用它，还有待观察。

Answer 4

这个问题有2个版本答案是

 first-of-type,tr-last-of-type

或

tr:nth-child(3n+1) {background-color: blue;}

都是真的

是否有特定于 tr 行的 CSS 选择器的语法？

Is there syntax for a tr line specific CSS selector?

html

css

css-selectors