Видове CSS селектори за атрибути - Semalt Expert

HTML елементът се състои от клас, идентификатор и атрибути. Селектор на атрибут избира HTML елементите, които съдържат атрибут или със стойност на атрибут. Селекторите на атрибути предоставят прост метод за прилагане на стилове върху HTML елементи с определена стойност на атрибут или черта. Селекторите на атрибути се определят от две квадратни скоби, които прикрепят атрибута със стойността му. Все пак можете да поставите селектор за тип елемент преди него. CSS [атрибут] Selector прилага правилата за стил към елемент, ако и когато се състои от дадена черта.

Видове селектори на атрибути

Има различни видове селектори на атрибути, всеки от които може да се използва за отделни случаи:

CSS [атрибут | = "стойност"] Селектор подчертава елементи, които имат определена черта, и той започва с определена стойност.

CSS [атрибут ~ = "стойност"] Селекторът се използва за намиране на елементи със стойност на свойството, съдържаща конкретна дума.

CSS [атрибут ^ = "стойност"] Селектор намира елементи със стойност на свойство, просеща с конкретна стойност. Стойността не е непременно цяла дума.

CSS [атрибут $ = "value"] Selector намира компоненти, които имат стойност на атрибут, завършваща с определена стойност.

Приложения на селекторите на атрибути CSS

Има различни начини, по които селекторът на атрибути може да се използва вместо да се използва универсалния, клас или ID селектор

Най-честото използване на селектори на атрибути е на входовете. Те включват селекторите на текст, селекторите за отметка, селекторите за пароли, селекторите на файлове, скритите селектори, селекторите на пароли, радио селекторите, селекторите за нулиране и други.

Форми за стилизиране

Селекторите на атрибути са много полезни при стилизиране на форми без клас или ID.

Връзки за стил

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

Гранични входове

Стилизирането на елементи на рамки с помощта на атрибута на границата на CSS е елегантен начин за добавяне на изображения към тялото. Тя ви позволява да определите изображение като граница на елемента. Изображението на границата може да бъде мащабирано, нарязано, повторено по различни начини, за да се гарантира, че се вписва в граничната зона. Атрибутът на радиус за граници позволява да се добавят заоблени ъгли, без да се използват изображения. Свойството определя формата на ъгъла.

Стилизиращи цветове

CSS селекторите на атрибути улесняват стилизирането на всички елементи, които имат определена цветова стойност. Можете да използвате цветната ключова дума, RGB (), RGBA (), HSL () и HSLA () обозначения. Стойностите на цветовете RGBA са разширение на цветовия модел RGB с канал, който определя непрозрачността на цвят. Стойността на параметрите варира от1.0 (непрозрачен} до 0,0 (прозрачен)

Цветовият модел HSL се обяснява като (Hue_saturation_Lightness). Представянето на нюанса е под формата на ъгъл (0-360) или цветното колело. Наситеността и лекотата се измерват като проценти 0% от насищането представлява сянка или сиво, докато 100 представлява пълноцветен. 100% лекота представлява бяло, докато 0% е черно.