Селектор атрибутов CSS для стиля высоты CSS

Будет ли селектор для

  <tr style="height:64px">

такой же, как обычный селектор атрибутов CSS, т.е. tr[style="height:64px"] или же tr[style=height:64px] или же tr[style="height\3a 64px"]?

Возможно, я не пробовал их правильно, но ничего из вышеперечисленного не помогло мне.

ОБНОВИТЬ:

@torazaburo Я принял ответ @balapa не потому, что точка с запятой, а потому, что ни одна из моих попыток не сработала, но @balapa показала мне работающий код. Я считаю, что без точки с запятой это все равно будет работать, но для меня это гораздо менее важно, чем иметь работающий код.

Кстати, FTR, оказалось, что мой инструмент тестирования был источником проблемы, и я только что написал лучший инструмент для проверки выбора CSS из командной строки после этого. При этом селектор (Go) должен быть указан как tr[style=height\:64px],

Источник

3 ответа

Решение

В браузерах, соответствующих спецификации, tr[style=height:64px] выдает ошибку DOM, говоря, что это неверный селектор. Версия с двойными кавычками работает. Это потому, что спецификация говорит, что значение в селекторе атрибута должно быть идентификатором CSS или строкой. height:64px не является идентификатором, поэтому он не работает. Заключение в кавычки (одинарные или двойные) превращает его в строку, которая работает.

Если вы не хотите заключать его в кавычки, вам нужно экранировать двоеточие, используя механизм escape для идентификаторов CSS. Поэтому [style=height\:64px] работает (второй пример ниже). Подробности см. В этом вопросе, дубликат которого, по сути, является этим вопросом.

[style="height\:64px"] работает, потому что выход из двоеточия, по сути, бесполезен.

[style="height\3a 64px"] работает как положено, с или без окружающих кавычек. \3a это escape-код CSS для двоеточия, и следующее пространство завершает escape-последовательность. Я не знаю, почему это не сработало для вас. Если вы указали этот селектор как строку JavaScript, возможно, вы забыли избежать обратной косой черты.

[style="height&#58;64px"] не работает, потому что ссылки на символы имеют значение только в HTML. Они не имеют никакого значения в селекторах CSS.

Ничто из этого не имеет никакого отношения к тому, заканчивается ли значение атрибута стиля точкой с запятой или нет. Таким образом, описание, предоставленное принятым ответом, неверно. Это работает только из-за кавычек.

Итог: просто оберните значения вашего атрибута в кавычки и перестаньте беспокоиться об этом.

function test(sel) {
  try {
    console.log(sel, "yields", document.querySelector(sel));
  } catch (e) {
    console.log(sel, "fails with error", e.name);
  }
}

test('tr[style=height:64px]');
test('tr[style=height\\:64px]');
test('tr[style="height:64px"]');
test('tr[style="height\\:64px"]');
test('tr[style="height\\3a 64px"]');    
test('tr[style=height\\3a 64px]');
test('tr[style="height&#58;64px"]');
<table>
  <tr style="height:64px"></tr>
</table>

Источник

Сделай это:

.trHeight { height: 64px}

и код:

<tr class='trHeight"></tr>

и захватить его

".trHeight"

использование атрибута стиля - это опасный практический CSS-селектор по встроенному атрибуту стиля

Источник

Вам нужно добавить точку с запятой в конце кода в ваших кодах HTML и CSS. Проверьте пример ниже

tr[style="height:64px;"] {
background: red;
}
<table>
  <tr>
    <td>Regular TR</td>
  </tr>
  <tr style="height:64px;">
    <td>TR with inline style</td>
  </tr>

Источник
Другие вопросы по тегам