Razred - CSS-trikovi

Anonim

Birač klase u CSS-u započinje točkom (.), Ovako:

.class ( )

Birač klase odabire sve elemente s odgovarajućim atributom klase.

Na primjer, ovaj element:

Push Me

je odabran i oblikovan ovako:

.big-button ( font-size: 60px; )

Klasi možete dati bilo koje ime koje započinje slovom, crticom (-) ili podvlakom (_). Brojeve možete koristiti u imenima klasa, ali broj ne može biti prvi ili drugi znak nakon crtice. Ako ne poludite i ne počnete bježati od selektora, što može postati čudno:

.\3A \`\( ( /* matches elements with class=":`(" */ )

Element može imati više klasa:



 This paragraph will get styles from .intro and .blue selectors.

Element s više klasa stiliziran je s CSS pravilima za svaku klasu. Također možete kombinirati više klasa za odabir elemenata:

/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )

Ova demonstracija pokazuje kako se jednoklasni selektori razlikuju od kombiniranih selektora:

Također možete ograničiti selektor klase na određenu vrstu elementa, koji se ponekad naziva "kvalificiranje oznake":

ul.menu ( list-style: none; )

Specifičnost

Sam po sebi, selektor klase ima vrijednost specifičnosti 0, 0, 1, 0. To je "moćnije" od selektora elemenata (poput:), a ( )ali manje snažno od selektora ID-a (poput #header ( )). Specifičnost se povećava kada kombinirate selektore klasa ili ograničavate selektor na određeni element.

Pristup predavanjima s JavaScriptom

Možete čitati i manipulirati s klasama elemenata classListu JavaScript-u. Na primjer, dodavanje klase može biti poput:

document.getElementById('italicize').classList.add('italic');

Ova demonstracija prikazuje osnovne primjere classListkorištenja:

jQuery ima metode za interakciju s nastave, uključujući .addClass(), .removeClass(), .toggleClass(), i .hasClass().

Više informacija

  • Pročitajte specifikaciju W3C za birače razreda.
  • Saznajte više o semantičkim imenima klasa.
  • Saznajte više o specifičnosti.
  • Saznajte o razlici između predavanja i osobnih iskaznica.
  • Saznajte više o više birača klasa i kombinacijama selektora klase / ID-a.
  • Saznajte o API-ju .classList.
  • Saznajte o manipulaciji klasama u jQueryju.

Podrška preglednika

Krom Safari Firefox Opera IE Android iOS
Bilo koji Bilo koji Bilo koji Bilo koji Bilo koji Bilo koji Bilo koji