Экранирование символов в селекторах классов CSS

я пытаюсь реализовать это W3 описание escapes символов в селекторах классов CSS.

у меня проблемы с abc def синтаксис, который ставит пробел после escape-последовательности, чтобы обеспечить def Не неправильно интерпретируется как часть символьного кода.

в частности, пытается поставить abcXY def в атрибут класса HTML или в команду jQuery().addClass('abc20 def') (the вот часть синтаксиса строкового литерала JS; строковое значение сам имеет одну косую черту) даст элементу два класса,abc и def.

этот синтаксис просто плохо реализован, и я должен придерживаться шестизначной ведущей нулевой формы? Или этот документ ссылается только на формат escape в коде CSS, а аргумент атрибута HTML / jQuery требует некоторой другой формы экранирования символа пробела?

редактировать: большое спасибо за объяснение, все!

теперь я понимаю, что этот синтаксис применяется только к коду CSS, а не к именам классов, заданным в атрибутах HTML или Javascript.

это также означает, что символы, обозначенные как пробел не могу происходят в значениях класса CSS, и никакой механизм escape не позволяет их добавлять. (В частности, если я правильно понимаю, селектор CSS .abc def действует и выбирает элементы с классом abc def, но бессмысленно, потому что ни один элемент не может иметь этого класс.)

для моего конкретного случая использования, что включает в себя отображение произвольных значений (которые can есть пробел) для допустимых имен классов, мне нужно определить свою собственную схему отдыха. Замена пробелов на - или _ (спасибо Praveen)-одна из возможностей; если отображение должно быть один к одному, заменяя их шестизначными шестнадцатеричными значениями Unicode (например. "abc def" -> "abc0020def" более мощный.

важно иметь в виду, что это замена влияет на само имя класса - ссылаться на класс abc0020def в CSS обратная косая черта должна быть экранирована снова, чтобы сформировать селектор .abc00020def.

7
css-selectors html5 javascript

2 ответов

вы путаетесь между именем класса, присутствующим в DOM, и экранированной версией, требуемой в CSS. Имя класса просто указывается как:

elt.classList.add('foo:bar')

это когда это упоминается в файле CSS (или другом контексте селектора CSS, таком как querySelector), что он должен быть спасен:

.foo\:bar { color: red; }

то же самое относится к случаю, когда вы решили использовать числовой escape:

elt.classList.add('1234');

. 234 { color: red; }

однако никакое количество побега не позволит вам иметь пробелы в имя класса. Пробелы абсолютно зарезервированы для разграничения нескольких имен классов на DOM .

4

короткий ответ: DOM анализирует любой селектор, который вы передаете ему как строку. Если результат (анализируется DOM) содержит пробелы или неразрывные пробелы, они будут считаться разделителями классов.

вы не должны беспокоиться о jQuery или любом другом ECMAScript, неправильно интерпретирующем пробелы, предназначенные для завершения escape-блока в качестве разделителя классов.

проще говоря, потому что они не отвечают за это комбинационной. объектная модель документов есть. Тот же DOM, который интерпретирует экранированные классы CSS. Поэтому, если имя экранированного класса работает в вашей таблице стилей, оно будет работать как селектор, если передается любой библиотекой JavaScript.

при одном условии: что он передается дому в форме, которую он понимает. форму работает в CSS.

теперь предположим, что по семантическим причинам вы хотели бы использовать класс 100% на элемент. Вы необходимо избежать, по крайней мере, первый и последний символы для селектора для работы. В середине мая или может не быть экранированы. Возможные селекторы, все переводя на уровне DOM на 100% имя класса, будет:

  • . 00
  • . 0
  • . 0
  • .
  • .

как вы уже знаете, есть больше экранирование методов CSS. Однако это касается все.

когда вы передаете селектор в jQuery или JavaScript, он будет рассматривать его как строку и передавать ее парсеру DOM. Однако у этих библиотек есть свои механизмы побега, позволяющие нам делать причудливые вещи. Таким образом, чтобы любой из вышеперечисленных селекторов попал в парсер DOM, вам нужно избежать обратных косых черт, чтобы они не интерпретировались JavaScript как escape-символы и не удалялись из строки.

в основном вам нужно удвоить обратная косая черта. любое из следующего сделает:

  • .\31 00\25,
  • .\31 0\30\25,
  • .\31\30 0\25
  • .\31\30\30\25
  • .\31 \30 \30 \25

вот фрагмент. Проверьте это. Добавьте элементы С class 0% и вы увидите, что они не выбраны. Потому что парсер DOM превратит любой из вышеперечисленных селекторов в 100% матч против 100% класс поставили на элемент.

$('.\31\30\30\25>div').on('click', function(){
  var positions = ['first','second','third'];
  alert('You clicked the ' + positions[$(this).index()] + ' div.');
})
. 0 > div{
  padding: 20px;
}
. 00 > *:first-child {
  color: red;
}

. 0 > *:nth-child(2) {
  color: blue;
}
. > *:last-child {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="100%">
        <div>first</div>
        <div>second</div>
        <div>third</div>
    </div>

возвращаясь к вашему примеру (abc\20 def) он будет разбирать и вести себя точно так же, как abc def. помещения, когда присутствует в конечном результате строки имени класса,будет интерпретироваться как класс разделители. Это касается обоих \x20 и \xa0 (пространство и неразрывное пространство), и это ожидаемое поведение.

как интересно (тривиальный) примечание, если по какой-то злой причине вы хотели сделать его трудно для людей, чтобы стиль вашего приложения, вы всегда можете добавить command введите символ в имя класса. Вот пример:

$('.space').removeClass('\x73\x70\x61\x63\x65').addClass('\x1a\x73\x70\x61\x63\x65');
.space {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="space">
  inspect me, i should be red!
</div>
9