html – 是否有一个tr线特定CSS选择器的语法?

前端之家收集整理的这篇文章主要介绍了html – 是否有一个tr线特定CSS选择器的语法?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在学习一个HTML,CSS,JS考试,并找到各种资源来帮助我学习.在做一个练习测验,我发现一个关于一个tr线CSS选择器的问题:

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

从我的研究中,没有像[line | -0,1,3]选择器语法这样的东西.

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

我已经在codepen.io编辑器中测试了,这个编辑器也不起作用,可以在这里找到:http://codepen.io/anon/pen/dPwwpB?editors=110

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

最后如果这个语法不正确,你还可以确认正确的语法吗? (为了清楚起见,HTML不包括在本文中,但可以在Codepen链接中找到)

解决方法

如上所述,选择C,tr:first-of-type,tr:last-of-type是正确的答案,但只有在行被语义上划分为一个a和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(如模板或脚本),tr:first-child,tr:最后一个孩子也会工作.请注意,选择D不正确,因为它使用具有传统单冒号语法的第一行伪元素,而不是:first-child伪类,此外:第一行伪元素没有意义在表行元素上.

选择B是不正确的,因为没有这样的语法.其他人则非常重要,因为这种语法对于选择器没有意义,因为它似乎将属性语法与不存在的属性“lines”一起使用,随后将垃圾伪装为某种运算符,后跟无效值语法,最重要的是整个“属性选择器”之前是后代组合器,即使选择器应该定位到tr元素而不是其后代.而且我同意CBroe的意见,因为它可能被简单地混淆了 – 尽管它确实让人想知道测试者是否可以刻意地将其标记为对巨魔的正确答案…

此外,表格没有“线条”的概念;他们有“行”,所以调用这样的选择器“line”是非常粗心的(尽管再次,我们有:链接未访问的链接和访问链接,which has come back to bite us now).

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

然而,不可能基于行语义相对于单元格进行匹配,特别是考虑到单元格可以通过rowspan属性跨多个行.例如,除非您选择该单元格显示的特定行,否则您无法在特定列中编写与某个列相关联的单元格的选择器,这通常需要事先知道标记,并假定该结构不会改变这可能会随着选择器4中引入的:has() pseudo-class而改进,但是如何在这种情况下使用,或者根本就可以使用它,还有待观察.

猜你在找的HTML相关文章