Jeśli mam następujący div:
<div class="sectionA" id="content">
Lorem Ipsum...
</div>
Czy istnieje sposób zdefiniowania stylu, który wyraża ideę „Div z id='content'
AND class='myClass'
”?
A może po prostu poszedłeś tą czy inną drogą jak w
<div class="content-sectionA">
Lorem Ipsum...
</div>
Lub
<div id="content-sectionA">
Lorem Ipsum...
</div>
css
css-selectors
Larsenal
źródło
źródło
img#Inbox
na twojej stronie może być ikona, która normalnie jest ustawiona na 50% krycia. Jednak gdy użytkownik ma wiadomość, chcesz ustawić ją na 100% krycia, a backend wskazuje to poprzez dodanieactive
klasy do elementu. W takim scenariuszu sensowne jest posiadanie selektora, który łączy zarówno identyfikator, jak i nazwę klasy.code
<p id = Product_1 class = Produkt> Produkt 1 </p> <p id = Product_2 class = Produkt> Produkt 2 </p> Czycode
pozwala to na ogólną stylizację wszystkich produktów, ale także umożliwia indywidualną stylizację dla określonych produktów?Odpowiedzi:
W twoim arkuszu stylów:
Edycja: Te też mogą pomóc:
i na przykład:
Edytuj, 4 lata później: ponieważ jest on bardzo stary i ludzie wciąż go znajdują: nie używaj tagNames w selektorach.
#content.myClass
jest szybszy niżdiv#content.myClass
ponieważ tagName dodaje niepotrzebny krok filtrowania. Używaj tagNames w selektorach tylko tam, gdzie musisz!źródło
div.class#id
powinien być równoważny, choć mniej zalecany; najpierw użyj bardziej unikalnych części selektora.Istnieją różnice między css
#header .callout
i między nimi#header.callout
.Oto „zwykły angielski”
#header .callout
:Wybierz wszystkie elementy o nazwie klasy,
callout
które są potomkami elementu o identyfikatorzeheader
.I
#header.callout
oznacza:Wybierz element, który ma identyfikator,
header
a także nazwę klasycallout
.Możesz przeczytać więcej tutaj sztuczki css
źródło
Nie ma nic złego w łączeniu identyfikatora i klasy w jednym elemencie, ale nie powinno być potrzeby identyfikowania go za pomocą jednej reguły. Jeśli naprawdę chcesz, możesz:
Nie potrzebujesz
div
przedniej części identyfikatora, jak sugerowali inni.Zasadniczo reguły CSS specyficzne dla tego elementu powinny być ustawione za pomocą identyfikatora, a te będą miały większą wagę niż reguły tylko klasy. Reguły określone przez klasę byłyby właściwościami mającymi zastosowanie do wielu elementów, których nie chcesz zmieniać w wielu miejscach za każdym razem, gdy trzeba je dostosować.
Sprowadza się to do tego:
Ma sens?
źródło
Ogólnie rzecz biorąc, nie powinieneś klasyfikować elementu określonego przez id, ponieważ id jest zawsze unikalny, ale jeśli naprawdę potrzebujesz, następujące elementy powinny działać:
źródło
Państwo może połączyć identyfikator i klasy w CSS, ale identyfikatory mają być unikalne, więc dodanie klasy do selektora CSS by zakwalifikować go nadmiernie.
źródło
użyj:
tag.id ; tag#class
w zmiennych tagu w swoim css.źródło
Identyfikatory powinny być unikalne dla całego dokumentu, więc nie powinieneś wybierać na podstawie obu. Możesz jednak przypisać elementowi wiele klas za pomocą
class="class1 class2"
źródło
Myślę, że wszyscy się mylicie. Identyfikatory kontra klasa nie są kwestią specyficzności; mają zupełnie inne logiczne zastosowania.
Identyfikatorów należy używać do identyfikowania określonych części strony: nagłówka, paska nawigacyjnego, głównego artykułu, przypisania autora, stopki.
Klasy powinny służyć do stosowania stylów na stronie. Załóżmy, że masz ogólną stronę magazynu. Każda strona witryny będzie miała te same elementy - nagłówek, nawigację, artykuł główny, pasek boczny, stopkę. Ale twój magazyn ma różne sekcje - ekonomię, sport, rozrywkę. Chcesz, aby trzy sekcje miały różny wygląd - ekonomiczny konserwatywny i kwadratowy, sportowa akcja, rozrywka jasna i młoda.
Używasz do tego klas. Nie musisz tworzyć wielu identyfikatorów - # artykułów ekonomicznych i # artykułów sportowych i # artykułów rozrywkowych. To nie ma sensu. Zamiast tego zdefiniujesz trzy klasy: ekonomię, sport i rozrywkę, a następnie zdefiniujesz identyfikatory #nav, #article i #footer dla każdej z nich.
źródło
Nie zadziała, gdy typem pliku jest HTML 4.01 ...
źródło