(атрибут) - CSS-трикове

Anonim

Има много начини да изберете елементи в CSS. Най-основният избор е по име на етикет, като p ( ). Почти всичко по-специфично от селектора на тагове използва атрибути - classи IDдвамата избират върху тези атрибути на HTML елементи. Но classи IDне са единствените атрибути, които разработчиците могат да изберат. Можем да използваме всеки от атрибутите на даден елемент като селектори.

Изборът на атрибути има специален синтаксис. Ето пример:

a(href="https://css-tricks.com") ( color: #E18728; )

Това е селектор за точно съвпадение , който ще избере само връзки с точната hrefстойност на атрибута „https://css-tricks.com“.

Седемте различни типа

Селекторите на атрибути са чувствителни към регистъра по подразбиране (вижте съвпадение на регистрите без регистра) и се записват в скоби ().

Има седем различни типа съвпадения, които можете да намерите с селектора на атрибути и синтаксисът е различен за всеки. Всеки от по-сложните селектори на атрибути надгражда синтаксиса на селектора за точно съвпадение - всички те започват с името на атрибута и завършват със знак за равенство, последван от стойността (ите) на атрибута, обикновено в кавички. Това, което върви между името на атрибута и знака за равенство, е това, което прави разликата между селекторите.

(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )

Стойността съдържа: стойността на атрибута съдържа термин като единствена стойност, стойност в списък със стойности или като част от друга стойност. За да използвате този селектор, добавете звездичка (*) преди знака за равенство. Например, img(alt*="art")ще изберете изображения с алтернативен текст „абстрактно изкуство“ и „спортист, започващ нов спорт“, тъй като стойността „изкуство“ е в думата „стартиране“.

Стойността е в списък, разделен с интервал: стойността е или единствената стойност на атрибута, или е цяла стойност в набор от стойности, разделени с интервал. За разлика от селектора „съдържа“, този селектор няма да търси стойността като фрагмент от дума. За да използвате този селектор, добавете тилда (~) преди знака за равенство. Например, img(alt~="art")ще изберете изображения с алтернативен текст „абстрактно изкуство“ и „арт шоу“, но не и „спортист, започващ нов спорт“ (който селекторът „съдържа“ би избрал).

Стойността започва с: стойността на атрибута започва с избрания термин. За да използвате този селектор, добавете карета (^) преди знака за равенство. Не забравяйте, че значението на регистъра е от значение. Например, img (alt = ”art”) ще избере изображения с алтернативен текст “art show” и “художествен модел”, но не и изображение с алтернативен текст “Arthur Miller”, защото “Arthur” започва с главна буква .

Стойността е първа в списък, разделен с тире: Този селектор е много подобен на селектора „започва с“. Тук селекторът съответства на стойност, която е или единствената стойност, или е първата в списък със стойности, разделени с тире. За да използвате този селектор, добавете символа на тръбата (|) преди знака за равенство. Например, li(data-years|="1900")ще избере елементи от списъка със data-yearsстойност „1900-2000“, но не и елемента от списъка със data-yearsстойност „1800-1900“.

Стойността завършва с: стойността на атрибута завършва с избрания термин. За да използвате този селектор, добавете знак за долар ($) преди знака за равенство. Например a(href$="pdf")избира всяка връзка, която завършва с .pdf.

Бележка за кавичките: Можете да отидете без кавички около стойността при някои обстоятелства, но правилата за избор без кавички са несъвместими между браузърите. Цитатите винаги работят, така че ако се придържате към тяхното използване, можете да сте сигурни, че вашият селектор ще работи.

Вижте селекторите за атрибути на писалка от CSS-трикове (@ css-трикове) на CodePen.

Забавен факт: стойностите се третират като низове, така че не е нужно да правите измислено избягване на символи, за да ги накарате да съвпадат, както бихте направили, ако използвате необичайни символи в селектор на клас или ID.

(class="(╯°□°)╯︵ ┻━┻")( color: red; font-weight: bold; )

Несъвместимо с малки и малки букви

Селекторите на атрибути без чувствителност към регистъра са част от спецификацията на ниво 4 на селектора на работната група на CSS. Както бе споменато по-горе, низовете на стойностите на атрибутите по подразбиране са чувствителни към малки и малки букви, но могат да бъдат променени на нечувствителни към регистъра чрез добавяне iнепосредствено преди затварящата скоба:

(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )

Несъвместимо с малки и малки букви може да бъде наистина удобно за насочване на атрибути, съдържащи непредсказуем, написан от човека текст. Да предположим например, че сте оформяли балонче за реч в приложение за чат и сте искали да добавите „махаща ръка“ към всякакви съобщения с текст „здравей“ под някаква форма. Можете да го направите само с CSS, като използвате съвпадение без регистра, за да уловите всички възможни вариации:

Вижте CSS атрибут, нечувствителен към писалката, съответстващ от CSS-трикове (@ css-трикове) на CodePen.

Комбинирането им

Можете да комбинирате селектор на атрибути с други селектори, като маркер, клас или ID.

div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )

Или дори да комбинирате множество селектори на атрибути. Този пример избира изображения с алтернативен текст, който включва думата "човек" като единствената стойност или стойността, в интервал от разделени, и по srcстойност, която включва стойността "Lorem":

img(alt~="person")(src*="lorem") ( /* style rules here */ )

Вижте комбинираните атрибути на Pen и избор само за атрибути от CSS-трикове (@ css-трикове) на CodePen.

Избор на атрибути в JavaScript и jQuery

Селекторите на атрибути могат да се използват в jQuery точно както всеки друг CSS селектор. В JavaScript можете да използвате селектори на атрибути с document.querySelector()и document.querySelectorAll().

Вижте селекторите за атрибути на писалка в JS и jQuery от CSS-трикове (@ css-трикове) на CodePen.

Свързани

  • клас
  • документ за самоличност

Повече информация

  • Кльощавите на селектори на атрибути
  • Селектори на атрибути в MDN
  • Селектори на атрибути в спецификациите на W3C CSS

Поддръжка на браузър

Chrome Сафари Firefox Опера IE Android iOS
Всякакви Всякакви Всякакви Всякакви 7+ Всякакви Всякакви