Выберите элементную базу на основе существования атрибута или значения атрибута
В этой статье мы поговорим о селекторе атрибутов.
Используя селектор атрибутов, мы можем выбирать элементы на основе существования атрибута или значения атрибута.
Например, у нас есть страница с изображениями, абзацами, тегами. У всех разные атрибуты и значения.
Исходный код:
https://www.udemy.com/course/a-complete-css-course/?referralCode=D70F3923FF6501A398AA
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div> <img photo="airport"src="airport.jpg" alt=""> <img photo="black car" src="bmw.jpg" alt=""> <img photo="blue car" src="racecar.jpg" alt=""> </div> <p title="green">green paragraph</p> <p title="yellow">yellow paragraph</p> <p title="red">red paragraph</p> <div title="green">green div</div> <div title="yellow">yellow div</div> <div title="red">red div</div> <a href="abc.xls">excel.xls</a> <a href="cde.xls">excel.xls</a> <a href="eee.xls">excel.xls</a> <a href="you.xls">excel.xls</a> <a href="abc.pdf">pdf.pdf</a> <a href="cde.pdf">pdf.pdf</a> <a href="">pdf.pdf</a> </body> </html>
[атрибут]
Например, если мы хотим выделить весь элемент с атрибутом «заголовок». Добавьте рамку шириной 5px и оранжевого цвета. Мы можем сделать это так в файле CSS.
[title]{
border: 5px solid orange;
}
р [название]
Мы также можем ограничиться определенным элементом, поместив селектор атрибута после селектора элемента.
p[title]{
border: 5px solid orange;
}
Например, мы используем p[title], поэтому мы можем выбрать те ‹p› с атрибутом title и оранжевой рамкой.
Только те ‹p› с атрибутом title получают оранжевую рамку.
[атрибут = «значение»]
Мы можем использовать оператор «=», чтобы выбрать элементы с атрибутом, равным этому конкретному значению.
Например, если мы говорим
[photo="airport"]{
border: 5px solid orange;
}
Теперь только фото аэропорта обведено оранжевой рамкой.
[атрибут~=”значение”]
Мы также можем использовать оператор «~=», чтобы выбрать те элементы, атрибут которых содержит определенное значение.
Например, мы можем сказать
[photo~="car"]{
border: 5px solid orange;
}
Затем мы можем выбрать изображения с атрибутом фото, которые содержат слово «автомобиль».
[атрибут$=”значение”]
Мы можем использовать оператор «$=», чтобы выбрать элемент со значением атрибута, заканчивающимся этим конкретным значением.
Например, мы можем использовать ‹a› с «href», которые заканчиваются на «.pdf». Затем добавьте определенный стиль.
[href $=".pdf"]{
background-color: red;
}
Теперь вы можете видеть только те ссылки ‹a› с файлом .pdf, которые имеют красный цвет фона.
В реальных случаях мы можем добавить значок перед ссылкой.
[href $=".pdf"]{
background: url(pdf.png) no-repeat ;
padding-left: 20px;
}
[href $=".xls"]{
background: url(excel.png) no-repeat ;
padding-left: 20px;
}
Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter.
