Sélecteur d'attributs CSS
Styles d'éléments HTML avec des attributs spécifiques
Les styles d'éléments HTML avec des attributs spécifiques ne sont pas seulement une classe et un identifiant.
Remarque : IE7 et IE8 doivent déclarer ! Seul DOCTYPE prend en charge les sélecteurs d'attributs ! IE6 et les versions inférieures ne prennent pas en charge les sélecteurs d'attributs.
Sélecteur d'attribut
L'exemple suivant transforme tous les éléments contenant le titre en bleu :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
[title]
{
color:blue;
}
</style>
</head>
<body>
<h2>我没有变</h2>
<h1 title="Hello world">Hello world</h1>
<a title="PHP中文网" href="http://www.php.cn">PHP中文网</a>
<hr>
<h2>PHP.cn</h2>
<p>Hello!</p>
</body>
</html> Exécutez le programme pour l'essayer
Sélecteurs d'attributs et de valeurs
L'exemple ci-dessous modifie le titre Style de bordure de title=' Élément php.cn' :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
[title=w3cschool]
{
border:5px solid green;
}
</style>
</head>
<body>
<h2>将适用:</h2>
<img title="php.cn" src="/upload/course/000/000/006/5809800b44336872.jpg" width="270" height="50" />
<br>
<a title="php.cn" href="http://www.php.cnc">php中文网</a>
<hr>
<h2>将不适用:</h2>
<p title="greeting">Hi!</p>
<a class="php.cn" href="http://www.php.cn">php中文网</a>
</body>
</html>Exécutez le programme pour l'essayer
Sélecteur d'attribut et de valeur - multi-valeur
Ce qui suit est un exemple de style d'élément qui contient un attribut de titre avec une valeur spécifiée, en utilisant (~) pour séparer l'attribut et la valeur :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
[title~=hello]
{
color:blue;
}
</style>
</head>
<body>
<h2>将适用:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<hr>
<h2>将不适用:</h2>
<p title="student">Hi CSS students!</p>
</body>
</html>Exécutez le programme pour l'essayer
Ce qui suit est un exemple de style d'élément qui contient un attribut lang avec une valeur spécifiée, en utilisant (|) pour séparer l'attribut et la valeur :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
[lang|=en]
{
color:blue;
}
</style>
</head>
<body>
<h2>将适用:</h2>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<hr>
<h2>将不适用:</h2>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
</body>
</html>Exécutez le programme pour essayer it out
Style de formulaire
Le style du sélecteur d'attribut n'a pas besoin d'utiliser le formulaire de classe ou d'identifiant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color: #d2ffd6;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
姓名:<input type="text" name="name" value="" size="20" placeholder="请输入你的姓名">
密码:<input type="text" name="pwd" value="" size="20" placeholder="请输入你的密码">
<input type="button" value="提交">
</form>
</body>
</html> Exécutez le programme pour l'essayer
