Selektor klasy
Selektor klasy
Selektor klasy to bezpłatna lekcja HTML for Kids na CoddyKit. To lekcja 1 z 1. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML for Kids, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML for Kids zawiera 1 lekcji w sumie.
Dlaczego używamy selektorów klas
Witajcie,
Dotarliśmy do selektorów klas — jednego z najważniejszych zagadnień w CSS.
Znamy selektor klas, ponieważ do tej pory często go używaliśmy.
W tej lekcji utrwalimy swoją wiedzę i poznamy zalety selektorów klas w porównaniu z innymi selektorami.
Składnia selektora klasy
Zacznijmy więc.
Do zdefiniowania selektora typu klasy używamy selektora kropki (.). Poniżej znajduje się selektor klasy o nazwie my-class, któremu przypisano styl font-size o wartości 10px.
.my-class {
font-size: 10px;
}
Możemy również zdefiniować więcej niż jeden styl dla selektora klasy.
.my-class {
font-size: 10px;
}
Wiele selektorów
Do tego samego elementu możemy przypisać więcej niż jedną klasę.
W poniższym przykładzie zdefiniowano dwa selektory klas o nazwach el1 i el2.
Do atrybutu class elementu utworzonego za pomocą znacznika p można dodać dwie lub więcej klas, oddzielając je spacją.
W sekcji podglądu można zobaczyć, że style obu klas są jednocześnie stosowane do elementu.
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>Dlaczego więc powinniśmy wybrać selektor klasy zamiast selektora znacznika i identyfikatora?
Dlaczego więc powinniśmy wybrać selektor klasy zamiast selektora znacznika i identyfikatora?
Użycie selektora znacznika może prowadzić do niepożądanych rezultatów, ponieważ wpływa on na wszystkie elementy utworzone za pomocą tego znacznika. Dlatego zazwyczaj używamy takich znaczników, gdy wszystkie elementy powinny mieć wspólną cechę.
Na przykład, jeśli chcemy, aby rodzina czcionki każdego elementu była ustawiona na „Lato”, tworzymy następującą definicję.
a{
font-family: Lato,sans-serif
}Dlaczego więc powinniśmy wybrać selektor klasy zamiast selektora znacznika i identyfikatora? 2
Za pomocą selektora identyfikatora możemy utworzyć definicję specyficzną dla elementu.
Jednak ponieważ wszystkie nasze definicje stylów dotyczą tylko jednego elementu, musielibyśmy ponownie napisać kod dla kolejnego elementu, któremu chcielibyśmy nadać te same właściwości.
W dokumencie HTML może znajdować się tylko jeden element z danym identyfikatorem.
Specyficzność CSS
Teraz poznajmy pojęcie specyficzności CSS.
Aby lepiej zrozumieć ten temat, ponownie utwórzmy problem i poznajmy to pojęcie podczas jego rozwiązywania.
Specyficzność CSS 2
W poniższym przykładzie
utworzono definicję stylu dla znacznika p.
Utworzono również definicję stylu za pomocą selektora klasy o nazwie .first.
Oba selektory wybrały ten sam element w naszym dokumencie HTML.
Oba selektory definiują style zmieniające tę samą właściwość koloru. W tym przypadku wystąpi konflikt.
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
Specyficzność CSS 3
Patrząc na przykład, możemy na podstawie naszej dotychczasowej wiedzy uznać, że kolor będzie czerwony.
Dzieje się tak, ponieważ zasada kaskadowości mówi, że wygrywa reguła znajdująca się później w kolejności kodu.
Istnieje jednak mały szczegół. Jeśli selektory mają taką samą specyficzność, wygrywa kod występujący później.
Jest to ocena pokazująca znaczenie specyficzności selektora dla danego elementu lub elementów.
Niezależnie od pozycji w kodzie reguła o wyższym poziomie specyficzności zostanie uwzględniona przez przeglądarkę.
Ostrzeżenie
Selektor klasy jest bardziej szczegółową definicją niż selektor elementu. Dlatego ma wyższy poziom specyficzności.
Specyficzność selektorów
Ustalenie, który selektor jest bardziej szczegółowy, jest w rzeczywistości bardzo proste.
Ponieważ do elementu można przypisać tylko jeden identyfikator, a na stronie internetowej może występować tylko jeden taki element, oczekujemy, że selektor identyfikatora będzie miał najwyższy priorytet.
Selektory klas mogą z kolei być bardziej szczegółowe niż selektory znaczników, ponieważ wybierają grupę bardziej szczegółową niż znacznik.
W poniższym przykładzie zobaczymy, że wygrywa selektor identyfikatora, ponieważ ten sam element zostanie wybrany za pomocą 3 różnych selektorów.
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>Narzędzie do obliczania specyficzności
Internetowy kalkulator specyficzności można otworzyć za pomocą tego łącza.
Kiedy specyficzność ma znaczenie
Czy muszę więc cały czas wykonywać te obliczenia?
Oczywiście, że nie. Konflikty nie wystąpią, jeśli będziemy pisać kod zgodnie ze standardami.
Nie trzeba więc za każdym razem wykonywać obliczeń matematycznych, ale gdy pojawi się problem, ta wiedza może być potrzebna do jego rozwiązania.
Gratulacje
Gratulacje. 🥳🥳🥳
Ukończył(a) Pan/Pani lekcję Selektor klas i specyficzność CSS.
W następnej sekcji poznamy rodzaje selektorów.
Można kliknąć, aby przejść do następnej sekcji.
Często zadawane pytania
Czy lekcja „Selektor klasy” jest bezpłatna?
Tak — pełny tekst „Selektor klasy” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML for Kids, przejdź na CoddyKit PRO. Kurs HTML for Kids zawiera 1 lekcji w sumie.
Co nauczysz się w „Selektor klasy”?
Selektor klasy Ćwiczysz HTML for Kids z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML for Kids?
Nie wymagamy żadnego doświadczenia. HTML for Kids w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 1.
Ile czasu zajmuje lekcja „Selektor klasy”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML for Kids?
Tak. Każda lekcja HTML for Kids zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.