Klasse - CSS-triks

Anonim

En klassevalg i CSS starter med en prikk (.), Slik:

.class ( )

En klassevalg velger alle elementene med et matchende klasseattributt.

For eksempel dette elementet:

Push Me

er valgt og stylet slik:

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

Du kan gi en klasse et hvilket som helst navn som begynner med en bokstav, bindestrek (-) eller understreking (_). Du kan bruke tall i klassenavn, men et tall kan ikke være det første tegnet eller det andre tegnet etter en bindestrek. Med mindre du blir gal og begynner å unnslippe velgerne, noe som kan bli rart:

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

Et element kan ha mer enn en klasse:



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

Et element med flere klasser er utformet med CSS-reglene for hver klasse. Du kan også kombinere flere klasser for å velge elementer:

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

Denne demoen viser hvordan enkeltklassevalg er forskjellige fra kombinerte velgere:

Du kan også begrense en klassevelger til en bestemt type element, som noen ganger kalles "tagkvalifisering":

ul.menu ( list-style: none; )

Spesifisitet

I seg selv har en klassevalg en spesifisitetsverdi på 0, 0, 1, 0. Det er "kraftigere" enn en elementvelger (som a ( ):), men mindre kraftig enn en ID-velger (som #header ( )). Spesifisiteten øker når du kombinerer klassevalg eller begrenser velgeren til et bestemt element.

Få tilgang til klasser med JavaScript

Du kan lese og manipulere klassene til et element med classListi JavaScript. For eksempel kan det å legge til en klasse være som:

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

Denne demoen viser grunnleggende eksempler på classListi bruk:

jQuery har også fremgangsmåter for å kommunisere med klasser, inkludert .addClass(), .removeClass(), .toggleClass(), og .hasClass().

Mer informasjon

  • Les W3C-spesifikasjonen for klassevalg.
  • Lær mer om semantiske klassenavn.
  • Lær mer om spesifisitet.
  • Lær om forskjellen mellom klasser og ID-er.
  • Lær om flere klassevalg og kombinasjoner av klasse / ID-velger.
  • Lær om .classList API.
  • Lær om klassemanipulering i jQuery.

Nettleserstøtte

Chrome Safari Firefox Opera DVS Android iOS
Noen Noen Noen Noen Noen Noen Noen