Jakie znaki / symbole są dozwolone w selektorach klas CSS ?
Wiem, że następujące znaki są nieprawidłowe , ale jakie znaki są prawidłowe ?
~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #
css
css-selectors
Darryl Hein
źródło
źródło
.hello/world
klasę ucieczki backslash:.hello\2fworld
,hello\2f world
lubhello\/world
Odpowiedzi:
Możesz to sprawdzić bezpośrednio w gramatyce CSS .
Zasadniczo 1 , nazwa musi zaczynać się znakiem podkreślenia (
_
), łącznikiem (-
) lub literą (a
-z
), po której następuje dowolna liczba myślników, znaków podkreślenia, liter lub cyfr. Istnieje pewien haczyk: jeśli pierwszy znak jest łącznikiem, drugi znak musi mieć 2 litery lub znak podkreślenia, a nazwa musi mieć co najmniej 2 znaki.Krótko mówiąc, poprzednia reguła przekłada się na następujące, wyodrębnione ze specyfikacji W3C. :
Identyfikatory zaczynające się od łącznika lub podkreślenia są zwykle zarezerwowane dla rozszerzeń specyficznych dla przeglądarki, jak w
-moz-opacity
.1 Wszystko to jest nieco bardziej skomplikowane przez włączenie znaków ucieczki Unicode (których tak naprawdę nikt nie używa).
2 Zauważ, że zgodnie z gramatyką, którą podłączyłem, reguła zaczynająca się od DWÓCH łączników, np.
--indent1
, Jest nieprawidłowa. Jestem jednak pewien, że widziałem to w praktyce.źródło
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F"
. Więc ---indent1
jest nieprawidłowy i należy go uciec, ponieważ\--indent1
(--
klasy psują się na iOS, na przykład)Ku mojemu zaskoczeniu większość odpowiedzi tutaj jest błędna. Okazało się, że:
Dowolny znak oprócz NUL jest dozwolony w nazwach klas CSS w CSS. (Jeśli CSS zawiera NUL (znak ucieczki lub nie), wynik jest niezdefiniowany. [ Znaki CSS ])
Odpowiedź Mathiasa Bynensa prowadzi do wyjaśnień i prezentacji pokazujących, jak używać tych nazw. Zapisana w kodzie CSS nazwa klasy może wymagać ucieczki , ale to nie zmienia nazwy klasy. Np. Niepotrzebnie przesadna reprezentacja będzie wyglądać inaczej niż inne reprezentacje tej nazwy, ale nadal odnosi się do tej samej nazwy klasy.
Większość innych języków (programowania) nie ma pojęcia ucieczki nazw zmiennych („identyfikatorów”), więc wszystkie reprezentacje zmiennej muszą wyglądać tak samo. W CSS tak nie jest.
Zauważ, że w HTML nie ma sposobu na umieszczenie znaków spacji (spacja, tabulator, przesunięcie wiersza, wysuw formularza i powrót karetki) w atrybucie nazwy klasy , ponieważ już one oddzielają klasy od siebie.
Tak więc, jeśli chcesz zmienić losowy ciąg znaków w nazwę klasy CSS: zadbaj o NUL i spację i ucieknij (odpowiednio dla CSS lub HTML). Gotowy.
źródło
Dokładnie odpowiedziałem na twoje pytanie tutaj: http://mathiasbynens.be/notes/css-escapes
W artykule wyjaśniono także, jak uciec przed dowolną postacią w CSS (i JavaScript), i zrobiłem też przydatne narzędzie do tego. Z tej strony:
źródło
class="404-error"
mogą być przydatne.<p class="foo bar">
dodaje dop
elementu dwie klasy :foo
ibar
. Nie ma sposobu (o czym myślę), aby dodać nazwę klasy zawierającą białe znaki do elementu HTML. Dołączono informacje o tym, jak uciec od znaków białych znaków, ponieważ warto uciec od takich znaków w innych kontekstach identyfikacyjnych, np. Nazwach czcionek.Przeczytaj specyfikację W3C . (jest to CSS 2.1, znajdź odpowiednią wersję dla twojego założenia przeglądarki)
edycja: odpowiedni akapit poniżej:
edycja 2: jak @mipadi wskazuje w odpowiedzi Tryptyku, jest to zastrzeżenie , również na tej samej stronie:
źródło
Pełne wyrażenie regularne to:
Dlatego wszystkie wymienione na liście postacie oprócz „
-
” i „_
” nie są dozwolone, jeśli zostaną użyte bezpośrednio. Ale możesz je zakodować za pomocą odwrotnego ukośnikafoo\~bar
lub notacji Unicodefoo\7E bar
.źródło
[\200-\377]
?[\178-\1114112]
w CSS 3 jest dozwolony bez ucieczki\377
tutaj jest właściwie źle. W sekcji gramatyki skanera leksykalnego CSS2.1 znajduje się uwaga: „„ \ 377 ”reprezentuje najwyższą liczbę znaków, z którą mogą sobie poradzić obecne wersje Flex (liczba dziesiętna 255). Należy ją odczytać jako„ \ 4177777 ”( dziesiętny 1114111), który jest najwyższym możliwym punktem kodowym w Unicode / ISO-10646. ” To też powinno być z\240
, nie\377
. Wydaje mi się, że ma teraz 7 lat, więc od tego czasu prawdopodobnie coś się zmieniło.-?(?:[_a-z]|(?![\u0000-\u0239]).*|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|(?![\u0000-\u0239]).*|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*
.Dla tych, którzy szukają obejścia, możesz użyć selektora atrybutów, na przykład, jeśli twoja klasa zaczyna się od liczby. Zmiana:
do tego:
Ponadto, jeśli istnieje wiele klas, musisz je określić w selektorze.
Źródła:
źródło
Rozumiem, że podkreślenie jest technicznie ważne. Sprawdzić:
https://developer.mozilla.org/en/underscores_in_class_and_id_names
„... błędna specyfikacja opublikowana na początku 2001 roku po raz pierwszy uczyniła podkreślenia legalnymi”.
Artykuł, do którego prowadzi link powyżej, mówi, że nigdy ich nie używaj, a następnie podaje listę przeglądarek, które ich nie obsługują, a wszystkie z nich są co najmniej długo zbędne.
źródło
W przypadku HTML5 / CSS3 klasy i identyfikatory mogą zaczynać się cyframi.
źródło
class="1a"
.). Jednak identyfikator CSS nie może zaczynać się od cyfry (np..1a
Nie działa). Możesz uciec, trudny (np..\31 a
Lub.\000031a
).Wychodząc z odpowiedzi @ Triptych, możesz użyć następujących 2 dopasowań wyrażeń regularnych, aby łańcuch był prawidłowy:
Jest to odwrotne dopasowanie, które wybiera wszystko, co nie jest literą, cyfrą, myślnikiem ani podkreśleniem, dla łatwego usunięcia.
Dopasowuje 0 lub 1 myślniki, a następnie 1 lub więcej liczb na początku łańcucha, również w celu łatwego usunięcia.
Jak go używać w PHP:
źródło