Jak połączyć klasę i identyfikator w selektorze CSS?

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>

W twoim arkuszu stylów:

div#content.myClass

Edycja: Te też mogą pomóc:

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

i na przykład:

div#content.sectionA

Edytuj, 4 lata później: ponieważ jest on bardzo stary i ludzie wciąż go znajdują: nie używaj tagNames w selektorach. #content.myClassjest szybszy niż div#content.myClassponieważ tagName dodaje niepotrzebny krok filtrowania. Używaj tagNames w selektorach tylko tam, gdzie musisz!

Istnieją różnice między css #header .callouti między nimi #header.callout.

Oto „zwykły angielski” #header .callout:
Wybierz wszystkie elementy o nazwie klasy, calloutktóre są potomkami elementu o identyfikatorze header.

I #header.calloutoznacza:
Wybierz element, który ma identyfikator, headera także nazwę klasy callout.

Możesz przeczytać więcej tutaj sztuczki css

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:

#content.sectionA{some rules}

Nie potrzebujesz divprzedniej 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:

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

Ma sens?

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ć:

div#content.sectionA {
    /* ... */
}

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.

użyj: tag.id ; tag#classw zmiennych tagu w swoim css.

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"

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.

.sectionA[id='content'] { color : red; }

Nie zadziała, gdy typem pliku jest HTML 4.01 ...