Selektor CSS z kropką w ID

103

Specyfikacja HTML dopuszcza kropki (.) W identyfikatorze:

<img id="some.id" />

Jednak użycie reguły selektora identyfikatora CSS nie będzie pasować poprawnie:

#some.id { color: #f00; }

Specyfikacja CSS dla selektorów ID nie wspomina o tym przypadku. Więc zakładam, że używa kombinacji nazwy tagu i selektora klasy ? Na przykład reguła CSS o wartości a.classNamemiałaby zastosowanie do wszystkich znaczników kotwicy ( <a>) o nazwie klasy className, na przykład <a class="className"></a>.

Czy można mieć zewnętrzną regułę pliku CSS, która odwołuje się do elementu HTML za pomocą identyfikatora zawierającego kropkę?

Oczekuję, że nie, ponieważ CSS określa, że ​​„ identyfikator ” CSS nie zawiera kropki jako prawidłowego znaku. Czy jest to więc podstawowa niezgodność między specyfikacjami HTML i CSS? Czy jedyną alternatywą jest użycie innego rodzaju wyboru CSS? Czy ktoś mądrzejszy ode mnie może to potwierdzić lub zaprzeczyć?

(Usunąłbym kropkę z atrybutu identyfikatora HTML, aby uprościć sprawę, ale jest to identyfikator wygenerowany przez system, więc nie mam możliwości zmiany go w tym przypadku).

html css css-selectors Jon Adams
źródło
Można powiedzieć, że jest to fundamentalna niezgodność między HTML i CSS. Jednak ponieważ są to dwa różne języki, nie oczekuje się, że będą do siebie pasować; identyfikator HTML to identyfikator HTML, podczas gdy identyfikator CSS to identyfikator CSS. Ponadto CSS może stylizować również inne języki, nie tylko HTML (chociaż przyznano, że CSS był na początku stworzony dla HTML).
BoltClock
3
Używa również #some.idkombinacji identyfikatora i selektora klasy.
BoltClock
Czy identyfikator jest jedynym atrybutem, który masz jako hak stylu? Wiem, że to trochę nie na temat, ale zastanawiam się, dlaczego chcesz użyć identyfikatora zamiast img lub klasy (jeśli są dostępne).
Jayx
@Jayx RE "Po co używać identyfikatora zamiast img (tagu) lub klasy?" Różni się z wielu powodów i sytuacji. Ale w tym przypadku trzeba stylizować konkretny element, a nie wszystkie obrazy na stronie. Klasa mogłaby zostać użyta, gdyby można było zmodyfikować kod HTML, ale w tym przypadku nie można jej zmodyfikować, ponieważ została wygenerowana przez system poza naszą kontrolą.
Jon Adams

Odpowiedzi:

203

Po dokładniejszym przejrzeniu specyfikacji stwierdziłem, że specyfikacja CSS zezwala na używanie znaku ukośnika odwrotnego ( \), jak w większości języków.

W moim przykładzie pasowałaby następująca reguła:

#some\.id {
  color: #f00;
}
Jon Adams
źródło
8
Dobra praca naukowa. Powinno być więcej takich pytań i odpowiedzi, a nie typu „napisz mój kod zamiast mnie”.
Pavlo,
3
niezłe badania. Właśnie natknąłem się na to w dużej aplikacji korporacyjnej, nad którą pracuję. Byłem totalnie zaskoczony i nigdy wcześniej tego nie widziałem. jaki jest sens robienia identyfikatora z kropką?
Anthony
1
@Anthony: Nie ma konkretnego powodu, aby umieszczać kropkę w atrybucie identyfikatora HTML. Myślę, że czasami autorzy po prostu chcą? Może w niektórych przypadkach może to wynikać z przecieków z podstawowych systemów implementacji, które mogą używać kropek w identyfikatorach kodu po stronie serwera do przetwarzania formularzy? Jestem pewien, że każdy, kto to robi, ma swoje własne powody; ale nie ma powodu HTML / CSS, aby je uwzględniać.
Jon Adams
1
Dziękuję, miałem problemy z OpenLayers, ponieważ używa on kropek w swoich identyfikatorach. Na przykład: „OpenLayers.Control.Attribution_7”. Myślę, że pomaga to w wewnętrznym kodzie, w którym nazwa zmiennej javascript może mieć taką samą wartość jak sam identyfikator.
Hoffmann
3
Zastanawiałem się nad dodaniem nowego pytania i napisaniem własnej odpowiedzi, ale postanowiłem po prostu skomentować tutaj. Jeśli używasz preprocesora Stylus, musisz użyć dwóch odwrotnych ukośników, np. #some\\.idAby uniknąć znaku specjalnego. Pierwszy ukośnik odwrotny jest używany przez Stylus, pozostawiając pozostały ukośnik odwrotny w skompilowanym CSS, co daje pożądany wynik opisany w tej odpowiedzi.
markrian
24

Możesz również użyć selektora atrybutu w następujący sposób:

[id='some.id'] {
  color: #f00;
}
SDD512
źródło
2
Może to działać w niektórych przeglądarkach, ale widziałem również błędy w przypadku selektorów atrybutów. Nadal możesz uciec przed ., jak \.gdyby.
Chris Jaynes,
0

Ponieważ używasz id, możesz także użyć document.getElementById (), która sprawdza wartość id jako zwykły ciąg znaków, a nie jako selektor CSS. np. działa również:

const myElem = document.getElementById("some.id");

Jedyną wadą jest to, że nie można ograniczyć zakresu wyszukiwania, tak jak w przypadku querySelector, np. SomeElement.querySelector (). ale ponieważ identyfikatory zawsze powinny być unikalne, wyszukiwanie w całym dokumencie z identyfikatorem jest poprawne.

pref
źródło