English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Представляет элемент, у которого есть атрибут с именем attribute и значение, представляющее собой список значений, разделенных пробелами, и по крайней мере одно из которых совпадает с value.
Полное руководство по CSS-селекторам
Выберите все элементы с атрибутом title, содержащим слово "flower"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной учебник(oldtoolbag.com)</title>
<style>
[title~=flower]
{
border:5px solid red;
}
</style>
</head>
<body>
<p>Если в атрибуте title изображения содержится слово "flower",则会设置为红色边框。</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113" />
<img src="img_flwr.gif" title="flowers" width="224" height="162" />
<img src="landscape.jpg" title="landscape" width="160" height="120" />
<p><b>Внимание:</b>Если[<i>атрибут</i>~=<i>значение</i>]должен работать в IE8 и более ранних версиях,DOCTYPEобязателен для объявления.</p>
</body>
</html>Проверьте, ‹/›[атрибут~=значение] селектор используется для выбора элементов, значения атрибута которых содержит指定的 слово.
IEFirefoxOperaChromeSafari
Все основные браузеры поддерживают[атрибут~=значение] селектор.
Внимание:[атрибут~=значениеВ IE8 для работы необходимо объявить <!DOCTYPE>.
CSS учебник: CSS атрибутные селекторы
Полное руководство по CSS-селекторам