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是正确的答案，但只有在行语义上划分为thead和tbody元素时，选择A似乎意味着。

以下是基于上述假设如何匹配每个所需元素的说明：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

假设thead和tbody没有除tr之外的任何其他子女（例如template或script），tr:first-child, tr:last-child会也工作。请注意，选项D不正确，因为它使用带有遗留单冒号语法的:first-line伪元素，而不是:first-child伪类，而且:first-line伪元素也是如此对表行元素没有意义。

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

此外，表格没有＆＃34; line＆＃34 ;;他们有＆＃34;行＆＃34;相反，所以调用这样一个选择器＆＃34; line＆＃34;会非常粗心。 （尽管如此，我们再次对未访问的链接:link和:visited访问过的链接which has come back to bite us now）。

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

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

Answer 2

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

通常，唯一正确的CSS语法是selector:specific-something，selector:specific(something)或selector[attr=val]。其他看起来不同的东西可能是错误的（除非您使用的是CSS预处理器）。

Answer 3

您的codepen上的HTML与问题不匹配 - “Adjustable Race”行/标题/其他地方在哪里？

话虽如此，如果“Product”是tr中唯一thead，而“可调整种族”和“Down Tube”是{{1}中的第一个和最后一个tr然后回答C应该是正确的。

tbody似乎没有任何意义 - 即使 意味着attribute selector，tr [line |- 0,1,3]属性也必须是line在td元素上（由于tr和[之间的空格），但HTML中的任何位置都没有这样的属性（并且line属性没有不存在于HTML中，|-必须是|=。

Answer 4

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

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

或

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

两者都是真的