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从此帖中排除,但可在Codepen链接上找到)

Answer 1

如上所述,选择C,tr:first-of-type, tr:last-of-type是正确的答案,但只有当行在语义上被分为a 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),tr:first-child, tr:last-child也会起作用.请注意,选项D是不正确的,因为它使用:first-line带有遗留单冒号语法的伪元素,而不是:first-child伪类,而且:first-line伪元素对表行元素没有意义.

选项B不正确,因为没有这样的语法.其他人提出了一个很好的观点,因为这样的语法对于选择器没有意义,因为它似乎使用属性语法和一个名为"lines"的不存在的属性,然后将垃圾伪装成某种运算符,然后是无效值语法,并且最重要的是整个"属性选择器"前面都有一个后代组合子,即使选择器应该定位tr元素而不是它们的后代.而且我同意CBroe的评论,因为它可能只是让人感到困惑 - 虽然它确实令人怀疑测试制定者是否可以故意将其标记为巨魔的正确答案......

此外,表格没有"线条"的概念; 相反,他们有"行",所以调用这样一个选择器"行"是非常粗心的(尽管如此,我们还有:link未访问的链接和:visited访问过的链接,现在又回来咬我们).

您可能想知道除了基本:*-of-type伪类之外是否存在用于匹配表行元素的任何特殊选择器语法.不,没有.这是因为HTML是行主要标记语言,这意味着行以行元素(因此tr)的形式表示,并且列由一系列单元格元素隐含.因此,当基本结构伪类为此目的正常工作时,几乎不需要创建特殊选择器来匹配行.

然而,基于行语义不可能相对于彼此匹配单元格,尤其是考虑到单元格可以通过rowspan属性跨越多个行.例如,除非您选择该单元格所在的特定行,否则您无法编写与特定多行单元格相对应的特定行中的单元格的选择器,这通常需要事先了解标记并假设该结构不会改变.这可以通过选择器4中引入的:has()伪类来改进,但是如何在这种情况下使用它,或者它是否可以使用,仍有待观察.

Answer 2

对于您的具体情况,您的答案肯定是正确的选择,并且[line |- whatever]CSS语法不正确.

在一般情况下,只有正确的CSS语法是selector:specific-something,selector:specific(something)或selector[attr=val].任何看起来不同的东西可能都是错误的(除非你使用的是CSS预处理器).