Razred - CSS-triki

Anonim

Izbirnik razreda v CSS se začne s piko (.), Takole:

.class ( )

Izbirnik razreda izbere vse elemente z ustreznim atributom razreda.

Na primer, ta element:

Push Me

je izbran in oblikovan tako:

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

Predavanju lahko dodelite poljubno ime, ki se začne s črko, vezajem (-) ali podčrtajem (_). V imenih razredov lahko uporabljate številke, vendar številka ne sme biti prvi ali drugi znak za vezajem. Če se vam ne zmeša in začnete ubežati selektorjem, kar lahko postane čudno:

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

Element ima lahko več razredov:



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

Element z več razredi je oblikovan s pravili CSS za vsak razred. Za izbiro elementov lahko kombinirate tudi več razredov:

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

Ta predstavitev prikazuje, kako se enorazredni selektorji razlikujejo od kombiniranih selektorjev:

Izbirnik razreda lahko omejite tudi na določeno vrsto elementa, ki se včasih imenuje »oznaka, ki izpolnjuje pogoje«:

ul.menu ( list-style: none; )

Specifičnost

Sam po sebi ima izbirnik razreda vrednost specifičnosti 0, 0, 1, 0. To je "močnejši" od izbirnika elementov (kot je:), a ( )vendar manj zmogljiv kot izbirnik ID (kot #header ( )). Specifičnost se poveča, če kombinirate izbirnike razredov ali omejite izbirnik na določen element.

Dostop do predavanj z JavaScriptom

classListV JavaScript lahko berete in upravljate z razredi elementa . Na primer, dodajanje razreda bi lahko bilo tako:

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

Ta predstavitev prikazuje osnovne primere classListuporabe:

jQuery ima tudi metode za interakcijo z razredi, vključno z .addClass(), .removeClass(), .toggleClass(), in .hasClass().

Več informacij

  • Preberite specifikacijo W3C za izbirnike razredov.
  • Preberite več o semantičnih imenih razredov.
  • Preberite več o specifičnosti.
  • Spoznajte razliko med predavanji in osebnimi dokumenti.
  • Spoznajte več izbirnikov razredov in kombinacije izbirnikov razredov / ID-jev.
  • Spoznajte API .classList.
  • Spoznajte manipulacijo s predavanji v jQueryju.

Podpora za brskalnik

Chrome Safari Firefox Opera IE Android iOS
Kaj Kaj Kaj Kaj Kaj Kaj Kaj