Klasė - CSS-gudrybės

Anonim

Klasės parinkiklis CSS prasideda tašku (.), Taip:

.class ( )

Klasės parinkiklis parenka visus elementus su atitinkančiu klasės atributu.

Pavyzdžiui, šis elementas:

Push Me

yra pasirinktas ir sukurtas taip:

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

Klasei galite suteikti bet kokį pavadinimą, prasidedantį raide, brūkšneliu (-) arba pabraukimu (_). Klasių pavadinimuose galite naudoti skaičius, tačiau skaičius negali būti pirmasis ar antrasis po brūkšneliu. Nebent išprotėsite ir nepradėsite bėgti iš selektorių, o tai gali tapti keista:

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

Elementas gali turėti daugiau nei vieną klasę:



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

Elementas su keliomis klasėmis yra sudarytas pagal kiekvienos klasės CSS taisykles. Taip pat galite sujungti kelias klases, kad pasirinktumėte elementus:

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

Ši demonstracija parodo, kaip vienos klasės selektoriai skiriasi nuo kombinuotų selektorių:

Taip pat galite apriboti klasės parinkiklį tam tikros rūšies elementu, kuris kartais vadinamas „žymos kvalifikavimu“:

ul.menu ( list-style: none; )

Specifiškumas

Pats savaime klasės selektoriaus specifiškumo vertė yra 0, 0, 1, 0. Tai yra „galingesnė“ nei elementų parinkiklis (pvz .:), a ( )bet mažiau galinga nei ID parinkiklis (panašus #header ( )). Konkretumas padidėja, kai sujungiate klasės selektorius arba apribojate selektorių konkrečiu elementu.

Prieiga prie klasių naudojant „JavaScript“

Galite skaityti ir valdyti elemento klases classList„JavaScript“. Pavyzdžiui, kurso pridėjimas gali būti toks:

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

Šiame demonstraciniame classListpuslapyje pateikiami pagrindiniai naudojimo pavyzdžiai :

JQuery taip pat turi metodus bendrauja su klasių, įskaitant .addClass(), .removeClass(), .toggleClass(), ir .hasClass().

Daugiau informacijos

  • Perskaitykite W3C klasės selektorių specifikaciją.
  • Sužinokite daugiau apie semantinius klasių pavadinimus.
  • Sužinokite daugiau apie konkretumą.
  • Sužinokite apie skirtumą tarp klasių ir ID.
  • Sužinokite apie kelis klasės parinkiklius ir klasės / ID parinkiklių derinius.
  • Sužinokite apie .classList API.
  • Sužinokite daugiau apie manipuliavimą klase „jQuery“.

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
Bet koks Bet koks Bet koks Bet koks Bet koks Bet koks Bet koks