Стиль HTML элементы с определенными атрибутами
Можно стиль HTML-элементы, которые имеют определенные атрибуты или значения атрибута.
CSS [атрибут] Selector
[attribute] селектор используется для выбора элементов с указанным атрибутом.
Следующий пример выбирает все <a> элементы с целевым атрибутом:
CSS [атрибут = "значение"] Selector
[attribute="value"] селектор используется для выбора элементов с заданным атрибутом и значением.
Следующий пример выбирает все <a> элементы с target="_blank" атрибута:
CSS [атрибут ~ = "значение"] Selector
[attribute~="value"] селектор используется для выбора элементов со значением атрибута содержится определенное слово.
Следующий пример выбирает все элементы с атрибутом заголовка , который содержит разделенный пробелами список слов, один из которых является " flower ":
В приведенном выше примере будут соответствовать элементы с title="flower", title="summer flower" , и title="flower new" , но не title="my-flower" или title="flowers" .
CSS [атрибут | = "значение"] Selector
[attribute|="value"] селектор используется для выбора элементов с указанным атрибутом , начиная с заданного значения.
В следующем примере выбираются все элементы со значением атрибута класса , который начинается с "top" :
Примечание: Значение должно быть целым словом, либо по отдельности, как class="top" , или с последующим дефисом ( - ) , как class="top-text" !
CSS [атрибут ^ = "значение"] Selector
[attribute^="value"] селектор используется для выбора элементов , значение атрибута которого начинается с заданного значения.
В следующем примере выбираются все элементы со значением атрибута класса , который начинается с "top" :
Примечание: Значение не должно быть целое слово!
CSS [атрибут $ = "значение"] Selector
[attribute$="value"] селектор используется для выбора элементов , значение атрибута которого заканчивается с заданным значением.
В следующем примере выбираются все элементы со значением атрибута класса , который заканчивается с "test" :
Примечание: Значение не должно быть целое слово!
CSS [атрибут * = "значение"] Selector
[attribute*="value"] селектор используется для выбора элементов , значение атрибута которого содержит заданное значение.
В следующем примере выбираются все элементы со значением атрибута класса , который содержит "te" :
Примечание: Значение не должно быть целое слово!
Стилизация Формы
Селекторы атрибутов могут быть полезны для моделирования форм без class или ID :
пример
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
} Попробуй сам " Совет: Посетите наш CSS Forms Учебник для большего количества примеров о том , как стиль формы с помощью CSS.
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 » Упражнение 6»
Другие примеры CSS селекторов
Используйте наш CSS Selector Tester для демонстрации различных селекторов.
Для полного ведения всех CSS селекторов, пожалуйста , перейдите на наш CSS селекторы Reference .