Это поможет вам понять различные типы селекторов атрибутов CSS.
Селекторы атрибутов были впервые представлены в CSS2.
Селекторы атрибутов CSS позволяют выбирать элементы на основе атрибутов и значений, связанных с любым атрибутом.
В основном существует четыре типа селекторов атрибутов CSS.
- Простые селекторы атрибутов.
- Селекторы точных значений атрибутов.
- Селекторы атрибутов частичного соответствия.
- Селекторы атрибутов ведущего значения.
Здесь мы обсудим различные типы селекторов атрибутов.
1. Простой селектор атрибутов
Эти селекторы атрибутов CSS позволяют выбирать элементы с любым указанным атрибутом.
Эти селекторы не требуют указания значения атрибута.
Вы можете использовать эти селекторы напрямую, не указывая никакого значения, связанного с атрибутом.
[attribute]
Пример простого селектора атрибутов
Предположим, вы хотите выбрать все элементы h2, имеющие атрибут класса, и хотите, чтобы цвет текста элемента h2 был зеленым.
Если это ваши требования, имеет смысл использовать простой селектор атрибутов.
Для этого вам нужно написать следующий CSS:
Если у вас есть следующий HTML-документ:
Когда вы используете вышеуказанный CSS.
Это полученный результат.
Вы можете использовать более одного атрибута
При желании вы также можете использовать несколько атрибутов.
Выбор, основанный на наличии более чем одного признака, определенно возможен.
Для этого вам нужно объединить несколько селекторов атрибутов одновременно.
Возьмите следующий HTML:
Если вы хотите увеличить размер шрифта любой гиперссылки HTML, содержащей href и заголовок.
Вы должны написать следующее:
Это увеличит размер шрифта первой и второй ссылок, присутствующих в HTML-документе выше.
Результат будет выглядеть следующим образом:
2. Выбирать строго по значениям атрибутов
Этот тип селектора атрибутов CSS используется, когда вам нужно выбрать элементы с фиксированным значением атрибута.
[attribute = "value"]
Пример выбора точного значения атрибута
Допустим, вы хотите утроить размер текста любой гиперссылки HTML.
Единственное требование состоит в том, чтобы обязательный атрибут заголовка гиперссылки имел значение «Google».
Вы бы написали:
Если документ HTML такой:
Если есть точное совпадение со значением атрибута. Приведенный выше CSS увеличит размер текста в три раза.
Результат будет выглядеть так:
3. Выбор на основе частичных значений атрибутов
Этот селектор CSS позволяет выбирать элементы на основе части значений атрибутов. CSS предоставляет множество вариантов для сопоставления части значения атрибута.
[attr ~= “val”] — It selects any element with an attribute attr whose value contains the word val in a space-separated series of word. [attr *= “val”] — It selects any element with an attribute attr whose value contains the substring val. [attr ^= “val”] — It selects any element with an attribute attr whose value begins with val. [attr $= “val”] — It selects any element with an attribute attr whose value ends with val.
Пример селектора атрибута частичного соответствия
Допустим, вы хотите утроить размер любой гиперссылки на веб-сайт Netflix. Для этого вы можете использовать селектор частичных атрибутов [attr *= «val»].
Вы бы написали:
Если HTML-документ выглядит так:
Приведенный выше CSS будет выбирать элементы на основе части значения их атрибута. Но значение не должно содержать слов, между которыми есть пробелы.
Приведенный выше CSS соответствует любому элементу, который ссылается на веб-сайт Netflix.
Вот результат применения приведенного выше CSS:
Точно так же вы можете применить другой селектор частичного атрибута, упомянутый выше.
4. Ведущие селекторы атрибутов ценности
Этот селектор выбирает любой элемент с атрибутом, который начинается с определенного значения, за которым следует дефис, или равен определенному значению.
[attribute |= “value”]
Пример селектора атрибута ведущего значения
Допустим, вы хотите выбрать любой элемент, который имеет описание go- или равно go.
Вы бы написали:
Если документ HTML такой:
С помощью селектора атрибутов CSS выше он выберет любой элемент, который имеет атрибут desc, равный go или начинающийся с go-.
Результат будет выглядеть следующим образом:
Хотите ускорить свою карьеру программиста?
Присоединяйтесь к группе людей, которые любят программирование и технологии.
Нажмите здесь, чтобы присоединиться к сообществу тихих программистов.
С помощью нашего сообщества мы исправим самые большие проблемы в жизни программистов и обсудим фронтенд и бэкэнд инжиниринг.
Мы поможем вам перепрограммировать ваше понимание различных вещей в технологии.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
