Třída - Triky CSS

Anonim

Selektor třídy v CSS začíná tečkou (.), Například takto:

.class ( )

Selektor třídy vybere všechny prvky s odpovídajícím atributem třídy.

Například tento prvek:

Push Me

je vybrán a stylizován takto:

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

Třídě můžete dát libovolný název, který začíná písmenem, spojovníkem (-) nebo podtržítkem (_). V názvech tříd můžete použít čísla, ale číslo nemůže být prvním znakem nebo druhým znakem za pomlčkou. Pokud se nezblázníte a nezačnete unikat selektorům, což může být divné:

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

Prvek může mít více než jednu třídu:



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

Prvek s více třídami je stylizovaný podle pravidel CSS pro každou třídu. Můžete také kombinovat více tříd k výběru prvků:

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

Tato ukázka ukazuje, jak se selektory jedné třídy liší od kombinovaných selektorů:

Selektor třídy můžete také omezit na konkrétní druh prvku, který se někdy nazývá „značka kvalifikující“:

ul.menu ( list-style: none; )

Specifičnost

Selektor třídy má sám o sobě hodnotu specificity 0, 0, 1, 0. To je „silnější“ než selektor prvků (jako :), a ( )ale méně silné než selektor ID (jako #header ( )). Specifičnost se zvyšuje, když kombinujete selektory tříd nebo omezujete selektor na konkrétní prvek.

Přístup ke třídám pomocí JavaScriptu

V classListJavaScriptu můžete číst a manipulovat s třídami prvků . Například přidání třídy může vypadat jako:

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

Tato ukázka ukazuje základní příklady classListpoužití:

jQuery má také metody pro interakci s třídami, včetně .addClass(), .removeClass(), .toggleClass()a .hasClass().

Více informací

  • Přečtěte si specifikaci W3C pro selektory tříd.
  • Další informace o názvech sémantických tříd.
  • Další informace o konkrétnosti.
  • Přečtěte si o rozdílech mezi třídami a ID.
  • Zjistěte více o selektorech tříd a kombinacích selektorů tříd / ID.
  • Další informace o API .classList.
  • Zjistěte více o manipulaci s třídami v jQuery.

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
Žádný Žádný Žádný Žádný Žádný Žádný Žádný