Sélecteur de propriété CSS
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
