Типы селекторов атрибутов CSS - эксперт Semalt

Элемент HTML состоит из класса, идентификатора и атрибутов. Селектор атрибута выбирает элементы HTML, которые имеют атрибут или значение атрибута. Селекторы атрибутов предоставляют простой метод применения стилей к элементам HTML с определенным значением атрибута или признака. Селекторы атрибутов определяются двумя квадратными скобками, которые заключают атрибут в его значение. Тем не менее, вы можете поставить селектор типа элемента перед ним. Селектор CSS [attribute] применяет правила стиля к элементу, если и когда он состоит из заданной черты.

Типы селекторов атрибутов

Существуют различные типы селекторов атрибутов, каждый из которых может использоваться для отдельных случаев:

CSS [attribute | = "value"] Селектор выделяет элементы, которые имеют определенную черту, и начинается с определенного значения.

CSS [attribute ~ = "value"] Селектор используется для поиска элементов со значением свойства, содержащим определенное слово.

CSS [attribute ^ = "value"] Селектор находит элементы со значением свойства, начиная с определенного значения. Значение не обязательно является целым словом.

CSS [attribute $ = "value"] Селектор находит компоненты, у которых значение атрибута заканчивается определенным значением.

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

Существуют различные способы использования селектора атрибута вместо универсального селектора, селектора класса или идентификатора

Наиболее распространенное использование селекторов атрибутов на входах. К ним относятся селекторы текста, флажки селекторов, селекторы паролей, селекторы файлов, скрытые селекторы, селекторы паролей, радио-селекторы, селекторы сброса и другие.

Формы для укладки

Селекторы атрибутов очень полезны при оформлении форм без класса или идентификатора.

Стиль ссылок

Например, селекторы атрибутов могут быть использованы для оформления блога, где у вас есть список ссылок на сайты друзей. Однако вы хотите, чтобы каждая ссылка была оформлена по-разному. Традиционный способ сделать это состоит в том, чтобы назначить имя для вызовов, которое потребовало бы большего количества наценок. Тем не менее, вы можете использовать nth-child, который требует, чтобы порядки никогда не менялись. Использование селекторов атрибутов делает это очень простым, поскольку есть атрибут, на который вы можете ориентироваться.

Пограничные входы

Стилизация элементов границ с помощью атрибута изображения границ CSS - это элегантный способ добавления изображений в тело. Позволяет определить изображение как границу элемента. Изображение границы можно масштабировать, разрезать, повторять различными способами, чтобы оно соответствовало области границы. Атрибут границ радиуса позволяет добавлять закругленные углы без использования изображений. Свойство определяет форму угла.

Цвета для укладки

Селекторы атрибутов CSS упрощают стилизацию всех элементов, имеющих конкретное значение цвета. Вы можете использовать цветные ключевые слова, RGB (), RGBA (), HSL () и HSLA (). Цветовые значения RGBA являются расширением цветовой модели RGB с каналом, который определяет непрозрачность цвета. Диапазон значений параметров: от 1,0 (непрозрачный} до 0,0 (прозрачный)

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