Które znaki są ważne w nazwach klas/selektorach CSS?

Ku mojemu zdziwieniu większość odpowiedzi tutaj jest błędna. Okazuje się, że:

Każdy znak oprócz NUL jest dozwolony w nazwach klas CSS w CSS. (Jeśli CSS zawiera NUL (ucieczki lub nie), wynik jest niezdefiniowany. [CSS-znaki])

Mathias Bynens ' answer linkuje do explanation i demos pokazujących, jak używać tych nazw. zapisany w kodzie CSS, nazwa klasy może wymagać ucieczki , ale to nie zmienia nazwy klasy. Np. niepotrzebnie nadpisana reprezentacja będzie wyglądać inaczej niż inne reprezentacje o tej nazwie, ale nadal odnosi się do tej samej nazwy klasy.

Większość innych języków (programowania) nie ma tej koncepcji ucieczki nazw zmiennych ("identyfikatorów"), więc wszystkie reprezentacje zmiennej muszą wyglądać tak samo. Tak nie jest w CSS.

Zauważ, że w HTML nie ma możliwości włączenia znaków spacji (spacja, tabulator, kanał linii, kanał formularza i powrót karetki) w atrybutienazwa klasy , ponieważ już od siebie oddzielają klasy.

Więc, jeśli chcesz zamienić losowy ciąg znaków w nazwę klasy CSS: dbaj o NUL i spację i escape(odpowiednio dla CSS lub HTML). Załatwione.

Przeczytaj W3C spec . (to jest CSS 2.1, znajdź odpowiednią wersję dla Twojego założenia przeglądarki)

Edit: odpowiedni akapit następuje:

W CSS, identyfikatory (w tym nazwy elementów, klasy i identyfikatory w selektory) mogą zawierać tylko znaki [a-z0 - 9] i ISO 10646 znaki U + 00A1 i wyższe, plus myślnik ( - ) i podkreślenie (_); nie mogą zaczynać się od cyfry lub myślnik, po którym następuje cyfra. Identyfikatory mogą również zawierać uciekł znaki i dowolny znak ISO 10646 jako kod numeryczny (patrz następny element). Na przykład, identyfikator " B & W?"może być napisane jako " B\ & w\?"lub" B\26 W\3F".

Edit 2: Jak @mipadi wskazuje w odpowiedzi tryptyku, jest to zastrzeżenie , również na tej samej stronie:

W CSS, identyfikatory mogą zaczynać się od' -' (dash) lub " _ " (underscore). Słowa kluczowe oraz nazwy obiektów zaczynające się od" -" lub ' _ ' są zarezerwowane dla rozszerzenia specyficzne dla dostawcy. Takie rozszerzenia specyficzne dla dostawcy powinny mieć jeden z następujących formatów:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

Przykład(y):

Na przykład, jeśli organizacja XYZ dodała właściwość opisująca kolor granica po wschodniej stronie Wyświetlacz, mogą to nazwać - xyz-border-east-color.

Inne znane przykłady:

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

Początkową kreską lub podkreśleniem jest gwarantowane, że nigdy nie będą używane w właściwość lub słowo kluczowe według dowolnego aktualnego lub przyszły poziom CSS. Tak więc typowy CSS implementacje mogą nie rozpoznawać takich właściwości i może je ignorować zgodnie z zasadami postępowania błędy przetwarzania. Jednakże, ponieważ initial dash or underscore is part of gramatyka, Programiści CSS 2.1 powinien zawsze być w stanie korzystać z Parser zgodny z CSS, nawet obsługują każdy specyficzny dla danego dostawcy rozszerzenia.

Autorzy powinni unikać specyficznych dla danego dostawcy rozszerzenia

Odpowiedziałem na twoje pytanie dogłębnie tutaj: http://mathiasbynens.be/notes/css-escapes

Artykuł wyjaśnia również, jak uciec znak w CSS (i JavaScript), i zrobiłem poręczne narzędzie również do tego. Z tej strony:

Jeśli chcesz nadać elementowi wartość ID ~!@$%^&*()_+-=,./';:"?><[]{}|`#, selektor wyglądałby tak:

CSS:

<style>
  #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

JavaScript:

<script>
  // document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector or similar
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>

Pełne wyrażenie regularne to:

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

Więc wszystkie wymienione znaki z wyjątkiem " - "i" _ " nie są dozwolone, jeśli są używane bezpośrednio. Ale można je zakodować za pomocą odwrotnego ukośnika foo\~bar lub za pomocą notacji unicode foo\7E bar.

Dla tych, którzy szukają obejścia, możesz użyć selektora atrybutów, na przykład, jeśli twoja klasa zaczyna się od numeru. Zmiana:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

Do tego:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

Ponadto, jeśli jest wiele klas, musisz je określić w selektorze.

Źródła:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. czy istnieje obejście tworzenia klas CSS o nazwach zaczynających się od numery ważne?

Dla klas HTML5 / CSS3 i ID mogą zaczynać się od liczb.

Rozumiem, że podkreślenie jest technicznie ważne. Sprawdź:

Https://developer.mozilla.org/en/underscores_in_class_and_id_names

"...errata do specyfikacji opublikowanej na początku 2001 roku po raz pierwszy stała się legalna."

Artykuł linkowany powyżej mówi, że nigdy ich nie używaj, a następnie podaje listę przeglądarek, które ich nie obsługują, z których wszystkie są, przynajmniej pod względem liczby użytkowników, od dawna zbędne.