Klass - CSS-trikid

Anonim

CSS-i klassi valija algab punktiga (.) Järgmiselt:

.class ( )

Klassi valija valib kõik elemendid, millel on vastav klassi atribuut.

Näiteks see element:

Push Me

on valitud ja kujundatud järgmiselt:

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

Klassile saate anda mis tahes nime, mis algab tähe, sidekriipsu (-) või alakriipsuga (_). Klasside nimedes saate kasutada numbreid, kuid number ei saa olla sidekriipsu järel esimene ega teine ​​märk. Kui te ei lähe hulluks ega hakka selektorite eest põgenema, mis võib imelikuks muutuda:

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

Elemendil võib olla rohkem kui üks klass:



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

Mitme klassiga element on kujundatud iga klassi CSS-reeglitega. Elementide valimiseks võite kombineerida ka mitu klassi:

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

See demo näitab, kuidas ühe klassi selektorid erinevad kombineeritud valijatest:

Samuti saate piirata klassi valijat teatud tüüpi elemendiga, mida mõnikord nimetatakse ka sildi kvalifitseerimiseks:

ul.menu ( list-style: none; )

Konkreetsus

Iseenesest on klassi valija spetsiifilisuse väärtus 0, 0, 1, 0. See on "võimsam" kui elemendi valija (näiteks:), a ( )kuid vähem võimas kui ID valija (nagu #header ( )). Täpsus suureneb, kui ühendate klassi valijad või piirate valija konkreetse elemendiga.

Klassidele juurdepääs JavaScripti abil

Elemendi klasse saate lugeda ja nendega classListJavaScripti abil manipuleerida . Näiteks võib klassi lisamine olla järgmine:

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

See demo näitab kasutamise põhinäiteid classList:

jQuery on ka meetodid suheldes klassi, sealhulgas .addClass(), .removeClass(), .toggleClass(), ja .hasClass().

Rohkem informatsiooni

  • Lugege klassi valijate W3C spetsifikatsiooni.
  • Lisateave semantiliste klasside nimede kohta.
  • Lisateave konkreetsuse kohta.
  • Lisateave klasside ja ID-de erinevuse kohta.
  • Lisateave mitme klassi valija ja klassi / ID valija kombode kohta.
  • Lisateave API .classList kohta.
  • Siit saate teada klassi jQuery manipuleerimise kohta.

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
Ükskõik Ükskõik Ükskõik Ükskõik Ükskõik Ükskõik Ükskõik