English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
表示 элемент, у которого есть атрибут, названный attribute, значение атрибута — “value” или начинается с префикса “value-” (тире — это дефис, код Unicode U+002D). Типичное применение — это выборка языковых сокращений кодов (например, zh-CN, zh-TW можно использовать как value).
Полное руководство по CSS-селекторам
Выберите элементы с атрибутом lang, начинающимся с "en", и установите их стиль:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной учебник (oldtoolbag.com)</title>
<style>
[lang|=en]
{
background:yellow;
}
</style>
</head>
<body>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
<p><b>Внимание:</b>Если [attribute~=<i>value</i>] должен работать в IE8 и более ранних версиях, DOCTYPE должен быть заявлен.</p>
</body>
</html>Проверьте, посмотрите ‹/›[attribute|=value] селектор используется для выбора элементов с атрибутом lang, начинающимся с указанного значения.
Внимание:Эта стоимость является целым словом, независимо от того, это lang="en" или как-то так, как lang=en-us все.
IEFirefoxOperaChromeSafari
Все основные браузеры поддерживают [attribute|=value] селектор.
Внимание: [attribute|=valueВ IE8 для работы необходимо声明<!DOCTYPE>
CSS учебник: CSS атрибуты выбора
Выберите класс всех элементов, начинающихся с top, и установите их в красный цвет:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной учебник (oldtoolbag.com)</title>
<style>
[class|=top]
{
background:red;
color:white;
}
</style>
</head>
<body>
<h1 class="top-header">Добро пожаловать</h1>
<p class="top-text">Привет, мир!</p>
<p class="content">Вы изучаете CSS?</p>
</body>
</html>Проверьте, посмотрите ‹/›