Szczegółowe omówienie selektorów klas CSS

Selektor klasy pozwala na określenie stylu niezależnie od elementów dokumentu.

Selektory klas CSS

Selektor klasy pozwala na określenie stylu niezależnie od elementów dokumentu.

Ten selektor można używać单独 lub w połączeniu z innymi elementami.

Wskazówka:Można używać tych selektorów tylko po odpowiednim oznakowaniu dokumentu, więc użycie tych dwóch selektorów zazwyczaj wymaga pewnego planowania i koncepcji.

Najczęstszym sposobem zastosowania stylu bez uwzględniania konkretnego elementu projektu jest użycie selektora klasy.

Modyfikacja kodu HTML

Przed użyciem selektora klasy, należy zmodyfikować konkretną dokumentację, aby selektor klasy działał poprawnie.

Aby powiązać styl wywoływany przez selektor klasy z elementem, należy określić klasę jako odpowiednią wartość. Zobacz poniższy kod HTML:

<h1 class="important">
Ten nagłówek jest bardzo ważny.
</h1>
<p class="important">
Ten akapit jest bardzo ważny.
</p>

W powyższym kodzie, klasa obu elementów została określona jako important: pierwszy nagłówek (element h1), drugi akapit (element p).

Składnia

Następnie używamy poniższego składni do zastosowania stylów do tych kategorii elementów, tj. przed nazwą klasy jest kropka (.), a następnie łączy się z selektorem ogólnym:

*.ważna {color:red;}

Jeśli chcesz wybrać wszystkie elementy o tej samej klasie, możesz pominąć selektor ogólny, co nie ma żadnych negatywnych konsekwencji:

.ważna {color:red;}

Spróbuj sam

Połączenie selektorów elementowych

Klasowe selektory mogą być używane razem z selektorami elementowymi.

Na przykład, może chcesz, aby tylko akapity były wyświetlane jako czerwony tekst:

p.ważna {color:red;}

Selektor teraz pasuje do wszystkich elementów p o atrybucie klasy zawierającym ważna, ale nie pasuje do innych typów elementów, niezależnie od tego, czy mają ten atrybut klasy. Selektor p.ważna można tłumaczyć jako: "Wszystkie akapity o wartości atrybutu klasy ważna". Ponieważ element h1 nie jest akapitem, ten selektor nie pasuje do niego, więc element h1 nie zmieni koloru na czerwony.

Jeśli naprawdę chcesz określić różny styl dla elementu h1, możesz użyć selektora h1.ważna:

p.ważna {color:red;}
h1.ważna {color:blue;}

Spróbuj sam

CSS wieloklasowe selektory

W poprzednim rozdziale zajęliśmy się przypadkiem, gdy wartość klasy zawiera jedno słowo. W HTML wartość klasy może zawierać listę słów, oddzielonych spacjami. Na przykład, jeśli chcemy oznaczyć określony element jako ważny (ważna) i ostrzeżenie, możemy napisać:

<p class="ważna ostrzeżenie">
Ten akapit jest bardzo ważnym ostrzeżeniem.
</p>

Kolejność tych słów nie ma znaczenia, można napisać również warning ważna.

Założamy, że wszystkie elementy o klasie important są pogrubione, a wszystkie elementy o klasie ostrzeżenie są kursywne, a wszystkie elementy zawierające zarówno important jak i ostrzeżenie mają srebrny tło. Można to napisać jako:

.ważna {font-weight:bold;}
.ostrzeżenie {font-style:italic;}
.ważna ostrzeżenie {background:silver;}

Spróbuj sam

Łącząc dwa selektory klas, można wybrać tylkoZawiera te wszystkie nazwy klaselementów (kolejność nazw klas nie ma znaczenia).

Jeśli wieloklasowy selektor zawiera nazwę klasy, która nie znajduje się na liście nazw klas, dopasowanie będzie nieudane. Proszę zobaczyć poniższe zasady:

.important.urgent {background:silver;}

Jak można się spodziewać, ten selektor dopasuje tylko elementy p, które mają atrybut class zawierający słowa important i urgent. Dlatego, jeśli atrybut class elementu p zawiera tylko słowa important i warning, nie będzie dopasowany. Jednak może dopasować następujące elementy:

<p class="important urgent warning">
Ten akapit zawiera bardzo ważne i pilne ostrzeżenie.
</p>

Spróbuj sam

Ważne:W wersjach Internet Explorer przed IE7 na różnych platformach, różne platformy Internet Explorer nie mogą poprawnie obsługiwać wieloklasowych selektorów.