ИД - ЦСС-трикови

Anonim

#idСелектор вам омогућава да циљате елемент за одредјивање idХТМЛ атрибут. Слично као што се атрибути класе у ЦСС-у означавају .с „тачком“ ( #) пре имена класе, ИД атрибути имају префикс са „октоктором“ ( ), познатијим као „хеш“ или „знак фунте“.

#header ( /* this is the ID selector */ background: #eee; )

Вредности атрибута ИД треба да буду јединствене. ХТМЛ са два или више идентичних idс не валидира и даће непредвидиве резултате. Ако постоје два иста, ЦСС ће се и даље подударати и обликовати оба. ЈаваСцрипт ће, међутим, приликом упита за ИД пронаћи прво и зауставити се.

Селектори ИД су изузетно моћни. Имају врло високу специфичност, обично писану као (0, 1, 0, 0). Стилови који се примењују надјачавају друге бираче који користе само ознаке или класе. Да демонстрира:

Погледајте ову оловку!

Даје се пасус са ИД-ом и атрибутом класе у супротности са ЦСС правилима; иако је селектор класе ( .reusable) испод селектора ИД-а ( #unique) у ЦСС-у (обично би заменио стилове изнад њега у „каскади“), одломак остаје црвен јер #uniqueпревладава плаву боју коју поставља .reusable. Бесконачна количина класа никада не може победити специфичност ИД-а (мада је некада постојала грешка у којој је 256 класа победило ИД).

Висока специфичност и јединственост подразумевају употребу #id„нуклеарне опције“ ЦСС-а: премоћне, нефлексибилне и несразмерно ефикасне. Избегавање #idселектора у ЦСС-у сматра се најбољом праксом: пожељно је користити класу у скоро сваком случају.

То је речено, ИД атрибути имају неколико корисних употреба изван ЦСС-а:

  • Пружање јединствених удица за ЈаваСцрипт
  • Елементи са idатрибутима могу се циљати сидреним ознакама постављањем hrefатрибута на idвредност са префиксом #симбола. Кликом на ту сидрену везу поново ћете фокусирати тренутну страницу на елемент са одговарајућим id. То се назива „идентификатор фрагмената“.
  • За заиста јединствене елементе у вашем ХТМЛ-у, као што су елементи обрасца, ИД-ови могу бити корисни за ствари попут повезивања labelс и inputс.

Тачке од интереса

  • Важеће #idне може почињати бројем и мора имати најмање један знак. Велики део Уницоде-а су важећи знакови у id.
  • id атрибути и селектори разликују велика и мала слова и морају се тачно подударати у ХТМЛ-у, ЦСС-у и ЈаваСцрипт-у

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

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