Селекторы атрибутов
Селекторы атрибутов
В CSS мы можем использовать селекторы атрибутов для более точного выбора элементов на веб-странице. Например, если у нас есть несколько полей ввода (input) и мы хотим окрасить в красный цвет только текстовые поля, мы можем использовать селектор атрибута type.
В следующем примере кода мы устанавливаем стиль для текстовых полей, у которых значение атрибута type равно "text":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы атрибутов в CSS3</title>
<style>
input[type="text"]{
border: 2px solid red;
}
</style>
</head>
<body>
<p><input type="text" id="login" /></p>
<p><input type="password" id="password" /></p>
<input type="submit" value="Send" />
</body>
</html>
Селектор атрибута может также применяться к классам и идентификаторам. В следующем примере мы выбираем все ссылки с классом "link", у которых значение атрибута href равно "http://apple.com" и устанавливаем для них красный цвет:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы атрибутов в CSS3</title>
<style>
.link[href="http://apple.com"]{
color: red;
}
</style>
</head>
<body>
<a class="link" href="http://microsoft.com">Microsoft</a> |
<a class="link" href="https://google.com">Google</a> |
<a class="link" href="http://apple.com">Apple</a>
</body>
</html>
Также, мы можем использовать специальные символы, такие как ^, $, и *, чтобы более гибко выбирать элементы по значениям атрибутов.
Например, селектор a[href^="https://"] выберет все ссылки, у которых значение атрибута href начинается с "https://", а селектор img[src$=".jpg"] выберет все изображения с расширением ".jpg".
Вот примеры:
a[href^="https://"]{
color: red;
}
img[src$=".jpg"]{
width: 100px;
}
a[href*="microsoft"]{
color: red;
}
Заключение
В CSS3, с использованием селекторов атрибутов, мы не только можем точечно стилизовать элементы веб-страницы, учитывая их атрибуты, но и расширять возможности выбора через специальные символы, что значительно улучшает гибкость и эффективность стилизации.
Будьте первым