sélecteur d'att...LOGIN

sélecteur d'attribut

Définissez les styles pour les éléments HTML avec les attributs spécifiés.

Vous pouvez définir des styles pour les éléments HTML avec des attributs spécifiés, pas seulement les attributs de classe et d'identifiant.

Remarque : IE7 et IE8 prennent en charge les sélecteurs d'attributs uniquement lorsque !DOCTYPE est spécifié. Dans IE6 et versions antérieures, la sélection d'attributs n'est pas prise en charge.


Sélecteur d'attribut

L'exemple suivant stylise tous les éléments avec l'attribut titre :

[title]{color:red;}

Sélecteurs d'attributs et de valeurs

L'exemple suivant stylise tous les éléments avec title="php":

[title=php]{border:5px solid blue;}


Sélecteur de valeur de somme d'attribut - Valeurs multiples ​​

L'exemple suivant définit un style pour tous les éléments qui contiennent un attribut de titre avec une valeur spécifiée. S'applique aux valeurs d'attribut séparées par des espaces :

[title~=hello] { color:red; }

L'exemple suivant stylise tous les éléments avec un attribut lang qui contient la valeur spécifiée. S'applique aux valeurs d'attribut séparées par des traits d'union :

[lang|=en] { color:red; }


Style du formulaire

Le sélecteur d'attribut est utilisé sans Particulièrement utile lors de la définition des styles pour les formulaires de classe ou d'identification :

input[type="text"]{  
    width:150px;  
    display:block;  
    margin-bottom:10px; 
    background-color:yellow; 
    font-family: Verdana, Arial;
}
input[type="button"]{  
    width:120px;  
    margin-left:35px; 
    display:block;  
    font-family: Verdana, Arial;
}

QQ截图20161012090827.png

section suivante
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> [title] { color:red; } </style> </head> <body> <h1>可以应用样式:</h1> <h2 title="Hello world">Hello world</h2> <a title="php" href="http://php.cn">php中文网</a> <hr /> <h1>无法应用样式:</h1> <h2>Hello world</h2> <a href="http://php.cn">php中文网</a> </body> </html>
soumettreRéinitialiser le code
chapitredidacticiel