Разред - ЦСС-трикови

Anonim

Селектор класе у ЦСС-у почиње тачком (.), Овако:

.class ( )

Селектор класе бира све елементе са одговарајућим атрибутом класе.

На пример, овај елемент:

Push Me

је одабран и обликован овако:

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

Класи можете дати било које име које започиње словом, цртицом (-) или подвлаком (_). Бројеве можете користити у именима класа, али број не може бити први или други знак након цртице. Осим ако не полудите и не почнете бјежати од селектора, што може постати чудно:

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

Елемент може имати више класа:



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

Елемент са више класа стилизован је са ЦСС правилима за сваку класу. Такође можете комбиновати више класа да бисте изабрали елементе:

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

Овај приказ показује како се једнокласни селектори разликују од комбинованих селектора:

Такође можете ограничити селектор класе на одређену врсту елемента, који се понекад назива „квалификовање ознаке“:

ul.menu ( list-style: none; )

Специфичност

Сам по себи, селектор класе има вредност специфичности 0, 0, 1, 0. То је „моћније“ од селектора елемената (попут:), a ( )али мање снажно од селектора ИД-а (попут #header ( )). Специфичност се повећава када комбинујете селекторе класа или ограничавате селектор на одређени елемент.

Приступање часовима са ЈаваСцрипт-ом

Можете читати и манипулисати класама елемената classListу ЈаваСцрипт-у. На пример, додавање класе може бити попут:

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

Ова демонстрација приказује основне примере classListу употреби:

јКуери има методе за интеракцију са класама, укључујући .addClass(), .removeClass(), .toggleClass()и .hasClass().

Више информација

  • Прочитајте спецификацију В3Ц за бираче класа.
  • Сазнајте више о семантичким именима класа.
  • Сазнајте више о специфичности.
  • Сазнајте о разлици између класа и ИД-ова.
  • Сазнајте о више селектора класе и комбинацијама селектора класе / ИД-а.
  • Сазнајте више о АПИ .цлассЛист.
  • Сазнајте о манипулацији класама у јКуерију.

Подршка прегледача

Хром Сафари Фирефок Опера ИЕ Андроид иОС
Било који Било који Било који Било који Било који Било који Било који