Que sont les parenthèses CSS

Les crochets CSS sont des sélecteurs d'attributs. Les styles d'éléments HTML avec des attributs spécifiques ne sont pas seulement une classe et un identifiant ; et IE7 et IE8 doivent déclarer "!DOCTYPE" pour prendre en charge les sélecteurs d'attributs, alors que les sélecteurs d'attributs d'IE6 et des versions inférieures ne le sont pas. soutenu.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

Recommandé : Tutoriel vidéo CSS

Que sont les parenthèses CSS ?

Les crochets CSS sont des sélecteurs d'attributs.

Stylez les éléments HTML avec des attributs spécifiques au-delà de la simple classe et de l'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 :

Exemple

[title]
{
    color:blue;
}

Sélecteur d'attribut et de valeur

Le L'exemple suivant modifie le style de bordure de l'élément title title='runoob' :

Exemple

[title=htmlcn]
{
    border:5px solid green;
}

Sélecteur d'attributs et de valeurs - multi-valeurs

Ce qui suit est un exemple de style d'élément contenant un attribut de titre avec une valeur spécifiée, en utilisant (~) pour séparer l'attribut et la valeur :

Exemple

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

Ce qui suit est un élément contenant un attribut lang avec une valeur spécifiée Exemple de style, utilisez (|) pour séparer les attributs et les valeurs :

Instance

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

Style de formulaire

Style de sélecteur d'attribut sans utiliser de classe ou de formulaire d'identification :

Exemple

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!