Есть ли синтаксис для селектора CSS с тремя строками?

Я изучаю экзамен по HTML, CSS, JS и нашел различные ресурсы, которые помогут мне учиться. Выполняя викторину, я нашел вопрос о селекторе tr line 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)

Ответ 1

Как уже упоминалось, выбор C, tr:first-of-type, tr:last-of-type является правильным ответом, но только если строки семантически разделены на элементы thead и a tbody, как предполагает выбор А.

Здесь показано, как каждый из желаемых элементов будет сопоставляться на основе вышеприведенного предположения:

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>

Ответ 2

В вашем конкретном случае ваш ответ определенно был правильным выбором, а [line |- whatever] - неправильный синтаксис CSS.

В общем случае единственным правильным синтаксисом CSS является selector:specific-something, selector:specific(something) или selector[attr=val]. Все, что выглядит иначе, возможно, неверно (если вы не используете препроцессор CSS).

Ответ 3

~~HTML на вашем кодефене не соответствует вопросу - где строка/подстрока "Регулируемая раса" /независимо?~~

Если сказано, что "Продукт" является единственным tr в thead, а "Регулируемая раса" и "Вниз" - это первые и последние tr в tbody, тогда ответ C должен быть правильный.

tr [line |- 0,1,3], похоже, не имеет никакого смысла - даже если это означало селектор атрибутов, атрибут line должны быть на элементах td (из-за пробела между tr и [), но такого атрибута не видно нигде в вашем HTML (а атрибут line не существует в HTML), и |- должно быть |=.

Ответ 4

есть 2 варианта ответа на этот вопрос:

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

или

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

оба из них истинны