Klasse - CSS-tricks

Anonim

En klassevælger i CSS starter med en prik (.) Som denne:

.class ( )

En klassevælger vælger alle elementer med en matchende klasseattribut.

For eksempel dette element:

Push Me

er valgt og stylet således:

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

Du kan give en klasse ethvert navn, der starter med et bogstav, bindestreg (-) eller understregning (_). Du kan bruge tal i klassenavne, men et tal kan ikke være det første tegn eller det andet tegn efter en bindestreg. Medmindre du bliver skør og begynder at flygte vælgere, hvilket kan blive underligt:

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

Et element kan have mere end en klasse:


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

Et element med flere klasser er stylet med CSS-reglerne for hver klasse. Du kan også kombinere flere klasser for at vælge elementer:

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

Denne demo viser, hvordan enkeltklassevælgere adskiller sig fra kombinerede vælgere:

Du kan også begrænse en klassevælger til en bestemt type element, der undertiden kaldes "tagkvalificering":

ul.menu ( list-style: none; )

Specificitet

I sig selv har en klassevælger en specificitetsværdi på 0, 0, 1, 0. Det er "mere kraftfuld" end en elementvælger (som a ( ):), men mindre kraftig end en ID-vælger (som #header ( )). Specificiteten øges, når du kombinerer klassevælgere eller begrænser vælgeren til et bestemt element.

Adgang til klasser med JavaScript

Du kan læse og manipulere klasser med et element classListi JavaScript. For eksempel kan tilføjelse af en klasse være som:

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

Denne demo viser grundlæggende eksempler på classListi brug:

jQuery har også fremgangsmåder til at interagere med klasser, herunder .addClass(), .removeClass(), .toggleClass(), og .hasClass().

Mere information

  • Læs W3C-specifikationen for klasseudvælgere.
  • Lær mere om semantiske klassenavne.
  • Lær mere om specificitet.
  • Lær om forskellen mellem klasser og ID'er.
  • Lær om flere klassevælgere og kombinationer af klasse / ID-vælger.
  • Lær om .classList API.
  • Lær om klassemanipulation i jQuery.

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Nogen Nogen Nogen Nogen Nogen Nogen Nogen