Sélecteur de propriété CSS
Style des éléments HTML avec des attributs spécifiques
Le style des éléments HTML avec des attributs spécifiques n'est 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 des titres en bleu :
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
[title]
{
color:blue;
}
</style>
</head>
<body>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="php中文网" href="http://www.php.cn">php中文网</a>
<hr>
<h2>Will not apply to:</h2>
<p>Hello!</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Sélecteur d'attribut et de valeur
L'exemple de modifications suivant le style de bordure de l'élément title='php Chinese website' :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
[title=phpzww]
{
border:5px solid green;
}
</style>
</head>
<body>
<h2>将适用:</h2>
<img title="php中文网" src="https://img.php.cn/upload/course/000/000/015/5c64ff4f37698935.png" width="270" height="80" />
<br>
<a title="php中文网" href="http://www.php.cn">php中文网</a>
<hr>
<h2>将不适用:</h2>
<p title="greeting">Hi!</p>
<a class="phpzww" href="http://www.php.cn">php中文网</a>
</body>
</html>Exécuter l'exemple»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Sélecteur d'attributs et de valeurs - multi-valeurs
Ce qui suit est l'attribut de titre contenant le valeur spécifiée Exemples de styles d'éléments, utilisant (~) pour séparer les attributs et les valeurs :
Instance
<!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écuter l'instance»
Cliquez sur le bouton "Exécuter l'exemple" pour afficher l'exemple en ligne
Ce qui suit est un exemple de style d'élément contenant un attribut lang avec une valeur spécifiée. Utilisez (|) pour séparer l'attribut et. valeur :
Instance
<!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écuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Style de formulaire
Le style du sélecteur d'attribut n'a pas besoin d'utiliser le formulaire de classe ou d'identifiant :
Instance
<!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:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
</style>
</head>
<body>
<form name="input" action="demo-form.php" method="get">
用户名:<input type="text" name="name" value="Peter" size="20">
密码:<input type="text" name="password" value="123456" size="20">
<input type="button" value="按钮">
</form>
</body>
</html>Instance en cours d'exécution»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
