html - tag - ¿Hay sintaxis para un selector CSS específico de línea tr?

title html attribute

Question

Estoy estudiando para un examen de HTML, CSS, JS y encontré varios recursos para ayudarme a estudiar. Al hacer una prueba de práctica, he encontrado una pregunta sobre un selector de CSS de línea tr:

La prueba me dice que la opción B es correcta.

De mi investigación, no hay tal cosa como una sintaxis de selector [línea | -0,1,3].

Me gustaría verificar si la sintaxis es correcta o si tengo razón al decir que se trata de un error por parte del cuestionario.

He probado esto en el editor de codepen.io que tampoco funciona, esto se encuentra aquí: http://codepen.io/anon/pen/dPwwpB?editors=110

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

Por último, si esta sintaxis no es correcta, ¿también puede confirmar la sintaxis correcta? (HTML excluido de esta publicación para mayor claridad, pero disponible en el enlace de Codepen)

Answer 1

Como se mencionó, la opción C, tr:first-of-type, tr:last-of-type , es la respuesta correcta, pero solo si las filas se dividen semánticamente en un elemento thead y tbody como la opción A parece implicar.

Aquí hay una ilustración de cómo cada uno de los elementos deseados se emparejaría en base a la suposición anterior:

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>

Suponiendo que thead y tbody no tengan más hijos que tr (como template o script ), tr:first-child, tr:last-child también funcionaría. Sin embargo, tenga en cuenta que la opción D es incorrecta porque utiliza el pseudo-elemento de :first-line con sintaxis heredada de un solo colon, y no la pseudo-clase de :first-child , y además el pseudo-elemento de :first-line no tiene sentido en un elemento de la tabla-fila.

La opción B es incorrecta, ya que no existe tal sintaxis. Los otros hacen un excelente punto en el sentido de que tal sintaxis no tiene sentido para un selector, ya que parece usar una sintaxis de atributo con un atributo inexistente llamado "líneas", seguido de la masticación de basura como algún tipo de operador, seguido de un valor no válido Sintaxis, y encima de todo esto, todo el "selector de atributos" está precedido por un combinador descendiente, aunque el selector debe estar orientado a los elementos tr y no a sus descendientes. Y estoy de acuerdo con el comentario de CBroe en que podría haber sido puesto simplemente para confundirlo, aunque hace que uno se pregunte si el preparador de pruebas podría haberlo marcado deliberadamente como la respuesta correcta al troll ...

Además, las tablas no tienen una noción de "líneas"; tienen "filas" en su lugar, por lo que sería extremadamente descuidado llamar a tal selector "línea" (aunque, nuevamente, tenemos :link para enlaces no visitados y :visited para enlaces visitados, que ha vuelto para mordernos ahora ) .

Puede preguntarse si hay alguna sintaxis de selector especial para hacer coincidir los elementos de la fila de la tabla además de la básica :*-of-type pseudo-clases de tipo. No, no hay. Esto se debe a que HTML es un lenguaje de marcado de fila principal , lo que significa que las filas se expresan en forma de elementos de fila (por lo tanto, tr ) y columnas implícitas por una serie de elementos de celda. Por lo tanto, hay poca necesidad de crear selectores especiales para hacer coincidir las filas cuando las pseudo-clases estructurales básicas funcionan bien para este propósito.

Sin embargo, no es posible hacer coincidir celdas entre sí en función de la semántica de filas, especialmente si se considera que las celdas pueden abarcar varias filas a través del atributo rowspan . Por ejemplo, no puede escribir un selector de celdas coincidentes en una columna determinada en relación con una celda de varias filas a menos que seleccione las filas específicas en las que aparece esa celda, lo que a menudo requiere un conocimiento previo del marcado y una suposición de que esa estructura no cambiará. Esto puede mejorar con el :has() pseudo-clase introducida en los selectores 4, pero aún queda por ver cómo se usará en tal escenario, o si es posible.

Answer 2

Hay 2 versiones de esta pregunta, las respuestas son

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

o

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

ambos verdaderos

Answer 3

Para su caso específico, su respuesta definitivamente fue la elección correcta, y la [line |- whatever] no es la sintaxis CSS correcta.

En general, la única sintaxis CSS correcta es selector:specific-something , selector:specific(something) , o selector[attr=val] . Cualquier otra cosa que se vea diferente probablemente esté mal (a menos que estés usando un preprocesador de CSS).

Answer 4

El código HTML de su código de código no coincide con la pregunta: ¿dónde está la fila / título / "Carrera ajustable"?

Dicho esto, si "Producto" es el único tr en thead , y "Carrera ajustable" y "Tubo thead " son el primero y el último tr en el tbody , entonces la respuesta C debe ser correcta.

tr [line |- 0,1,3] no parece tener ningún sentido en absoluto - incluso si se pretendía que fuera un selector de atributo , ese atributo de line tendría que estar en los elementos td (debido al espacio entre tr y [ ), pero no se puede ver dicho atributo en ninguna parte de su HTML (y un atributo de line no existe en HTML), y |- tendría que ser |= .