Osztály - CSS-trükkök | CSS Almanach 2025

Az osztályválasztó a CSS-ben egy ponttal (.) Kezdődik, így:

.class ( )

Az osztályválasztó minden elemet kiválaszt egy megfelelő osztályattribútummal.

Például ez az elem:

Push Me

a következőképpen van kiválasztva és stílusban:

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

Adhat egy osztálynak bármilyen nevet, amely betűvel, kötőjellel (-) vagy aláhúzással (_) kezdődik. Használhat számokat az osztálynevekben, de egy szám nem lehet az első karakter vagy a kötőjel utáni második karakter. Kivéve, ha megőrül, és nem kezd elmenekülni a szelektorok elől, ami furcsává válhat:

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

Egy elemnek több osztálya is lehet:


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

Egy több osztályú elemet az egyes osztályok CSS-szabályai alkotnak. Az elemek kiválasztásához több osztályt is kombinálhat:

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

Ez a bemutató bemutatja, hogy az egyosztályos választók mennyiben különböznek a kombinált választóktól:

Az osztályválasztót egy bizonyos típusú elemre is korlátozhatja, amelyet néha „tag kvalifikálónak” is neveznek:

ul.menu ( list-style: none; )

Sajátosság

Önmagában az osztályválasztó specifitási értéke 0, 0, 1, 0. Ez „erősebb”, mint egy elemválasztó (például a ( ):), de kevésbé hatékony, mint egy azonosítóválasztó (hasonló #header ( )). A specifikusság növekszik, ha kombinálja az osztályválasztókat, vagy a választót egy adott elemre korlátozza.

Osztályok elérése JavaScript használatával

Egy elem osztályait elolvashatja és manipulálhatja classLista JavaScript-ben. Például egy osztály hozzáadása hasonló lehet:

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

Ez a bemutató classLista használat alapvető példáit mutatja be:

jQuery is módszereket kölcsönhatásban osztályok, beleértve .addClass(), .removeClass(), .toggleClass(), és a .hasClass().

Több információ

Olvassa el az osztályválasztók W3C specifikációját.
Tudjon meg többet a szemantikus osztálynevekről.
További információ a sajátosságokról.
Ismerje meg az osztályok és az azonosítók közötti különbséget.
Tudjon meg többet az osztályválasztókról és az osztály / azonosító választó kombókról.
További információ a .classList API-ról.
Tudjon meg többet a jQuery osztálykezeléséről.