Как ссылаться на идентификатор со специальными символами в CSS

Question

Я работаю над оболочкой MediaWiki, которая будет выпущена для всеобщего использования бесплатно, но есть кое-что, что мешает мне завершить проект. Здесь проблема.

Существует список, который динамически генерируется MediaWiki (не скином, поэтому я не могу это контролировать), и он назначает каждому <li> и идентификатор равен имени страницы, которую он представляет. Теперь языки, отличные от английского, имеют специальные символы, которые могут отображаться в заголовках этих страниц, например "Página Aleatoria". Я вижу, что для этой страницы установлен идентификатор, заменяющий акцентированный символ для некоторого кода, что-то вроде этого <li id="P.C3.A1gina-aleatoria">,

Теперь вопрос в том, как мне обратиться к этому идентификатору в CSS? я пытался #P.C3.A1gina-aleatoria, #página-aleatoria а также #pagina-aleatoria но ни один из тех, кажется, не работает.

Есть идеи? Заранее спасибо!

Answer 1

Попробуйте это, вы можете использовать\"экранировать специальные символы в CSS, как и другие языки

#P\.C3\.A1gina-aleatoria { }

Также вы можете попробовать атрибуты селекторов, как

li[id="P.C3.A1gina-aleatoria"] {}

Проверьте эту скрипку

Answer 2

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

#P\.C3\.A1gina-aleatoria { }

Если вы хотите использовать другие нестандартные специальные символы (например, á) в CSS, вы можете просто использовать их в коде без экранирования.

#Página-aleatoria

Полное объяснение того, как избежать других символов в CSS, можно найти здесь: https://mathiasbynens.be/notes/css-escapes