Вопрос по html, pseudo-element, css-content, pug, css – HTML специальные символы в контенте CSS, используя attr ()

3

Соответствующий кодовый блок:http://codepen.io/anon/pen/ocptF/

РЕДАКТИРОВАТЬ: Codepen использует Джейд, и, следовательно, портит несколько вещей. Я не знал об этом, когда начинал этот вопрос. По сути, я думал, что CSS attr () скопирует атрибут HTML буквально, но это не так.

Я хотел бы использовать CSSattr функция для заполненияcontent для некоторых псевдоэлементов. Тем не менее, он печатает004 когда атрибут HTML установлен на\f004, а также08fa когда\f08fa.

Соответствующие строки:

HTML:

<div class="zoomfade" data-fill='\f004' data-unfill='\f08a'></div>

CSS:

.zoomfade:before {
  content: attr(data-unfill);
  position: absolute;
}

.zoomfade:before {
  content: attr(data-fill);
  position: absolute;
}

Спасибо!

Если вопрос касается нефрита, то вы должны включить нефритовый тег и включить нефритовый код в свой вопрос. Правильный ответ отличается от того, смотрите ли вы на реальный код в вопросе или нефрит в коде. James Montagne
Джейд не влияет на это не работает. Ошибка предполагала, что функция css attr будет буквально использовать атрибут html. az_
Извините, я забираю это обратно. Ты прав. Источник моего замешательства был неверным. Я добавилjade тег к вопросу. az_

Ваш Ответ

1   ответ
5

. Когда вы указываете его в значении атрибута HTML, используйте это значение в CSSattr()Это воспринимается буквально. ОтCSS2.1 спецификация:

атр (Х)
Эта функция возвращает в виде строки значение атрибута X для субъекта селектора. Строка не анализируется процессором CSS. [...]

Поскольку вы задаете коды символов в значениях атрибутов HTML, вы можете использовать либо ссылки на символы HTML, ссылки на сущности, либо сами символы Unicode. Стоит отметить, что двухсимвольные коды, которые у вас есть, кажутся недействительными, поэтому они могут вообще не работать.

РЕДАКТИРОВАТЬ: [...] По сути, я думал, что CSS attr () будет копировать атрибут HTML буквально, но это не так.

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

Например, если источник представлен в необработанной HTML-разметке, то, как я упоминал выше, вам нужно будет использовать экранирование символов HTML, потому что HTML анализируется анализатором HTML. Если элементы генерируются с использованием механизма шаблонов на основе JS, такого как Jade, то экранирование символов принимает форму\u с последующим шестнадцатеричным кодом. В обоих случаях соответствующие парсеры преобразуют escape-последовательности в свои репрезентативные символы, а сами символы - это то, что хранится в DOM как часть значения атрибута.

Конечно, всегда есть альтернатива простого использования символов Unicode напрямую. Если все ваши исходные файлы закодированы как UTF-8, у вас не должно возникнуть проблем с непосредственным использованием символов.

@aaronz: это два разных представления одного и того же символа: одно в CSS, другое в HTML. BoltClock
Кстати, по поводу того, что это 2 недопустимых кода символа - я пытаюсь использоватьfortawesome.github.io/Font-Awesome/cheatsheet az_
@Adrian Preuss: Как говорится в цитируемом тексте, строка вообще не анализируется CSS. Пока контекстом является HTML, вы используете экранирование символов, характерное для HTML. BoltClock
@aaronz: Ааа, это все объясняет. BoltClock

Похожие вопросы