English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
représente un élément avec une propriété nommée attribute, la valeur de la propriété est "value" ou commence par "value-" est un préfixe ("-" est un tiret, le codage Unicode est U+002D) Début. L'application typique consiste à correspondre aux codes abrégés de langue (comme zh-CN, zh-TW peut utiliser zh comme value).
Manuel complet des sélecteurs CSS
Sélectionnez les éléments whose lang attribute value starts with "en" et définissez leur style :
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base Tutorial(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-<p lang="gb">Ello!</p>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
<p><b>Remarque:</b>Si [<i>attribute</i>~=<i>value</i>] Pour IE8 et les versions antérieures, DOCTYPE doit être déclaré.</p>
</body>
</html>Vérifiez ici ‹/›[attribute|=value] Sélecteur est utilisé pour sélectionner les éléments whose attribute values start with the specified value.
Remarque:Cette valeur est un mot entier, que ce soit seul comme lang="en", ou comme tiret - Comme lang=en-us peuvent tous.
IEFirefoxOperaChromeSafari
Tous les navigateurs populaires supportent [attribute|=value] Sélecteur.
Remarque: [attribute|=value] en IE8Doit être déclaré dans IE!DOCTYPE
Tutoriel CSS: Sélecteur d'attribut CSS
Choisissez une classe d'attribut commençant par top pour tous les éléments et réglez-les en rouge :
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base Tutorial(oldtoolbag.com)</title>
<style>
[class|=top]
{
background:red;
color:white;
}
</style>
</head>
<body>
<h1 class="top-header">Bienvenue</h1>
<p class="top-text">Hello world!</p>
<p class="content">Are you learning CSS?</p>
</body>
</html>Vérifiez ici ‹/›