Que sont les sélecteurs CSS ? Que sont les sélecteurs CSS ?

Le contenu de cet article est de vous présenter ce que sont les sélecteurs CSS ? Que sont les sélecteurs CSS ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Manuel hors ligne W3School (version 2017.03.11) à télécharger : https://pan.baidu.com/s/1c6cUPE7jC45mmwMfM6598A

Le sélecteur fait référence à l'élément à modifier. Les sélecteurs couramment utilisés en CSS incluent le le sélecteur HTML, le sélecteur de classe et le sélecteur d'identifiant .

Sélecteurs HTML

Le sélecteur CSS le plus courant est le sélecteur d'élément. En d’autres termes, les éléments du document sont les sélecteurs les plus élémentaires.

Si vous stylisez du HTML, le sélecteur sera généralement un élément HTML tel que p, h1, em, a ou même le HTML lui-même.

Par exemple :

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

fait passer un style d'un élément à un autre.

Supposons que vous décidiez de rendre le texte du paragraphe ci-dessus (au lieu de l'élément h1) gris. Changez simplement le sélecteur h1 en p.

html {color:black;}h2 {color:silver;}

Sélecteur de classe

Dans la norme W3C, les sélecteurs d'éléments sont également appelés sélecteurs de type.

"Le sélecteur de type correspond au nom du type d'élément du langage du document. Le sélecteur de type correspond à chaque instance de ce type d'élément dans l'arborescence du document."

Le format est le suivant :

selector.classname{
　　　　property1:valu;
　　　　property2:valu;
　　　　……
　　}

Par exemple :

p.left {font-family: sans-serif;}

sélecteur d'identifiant

Lorsque vous avez besoin de styliser un élément individuellement, vous pouvez utilisez le sélecteur d'identifiant, pour utiliser le sélecteur d'identifiant, vous devez d'abord définir une valeur d'identifiant pour l'objet du style de conception. Le sélecteur d'identifiant est unique et les valeurs d'identifiant des différents éléments ne peuvent pas être répétées.

Exemple :

<p id="top"></p>

Définir le style du haut :

#top{
　　property1：value;
　　property2：value;
　　……
}

html

76c82f278ac045591c9159d381de2c57
3d5001d4a74c4b681850f519bcffe8a9
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a7CSS 常用选择器6e916e0f7d1e588d4f442bf645aedb2f
269ba738a29aafb66c6db71e97931089
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

8fcb895fbf6702c912ece3f561682883
4a249f0d628e2318394fd9b75b4636b1HTML选择器473f0a7621bec819994bb5020d29372a
1543e05224819c12ab8136df28db3a2ecss test94b3e26ee717c64999d7867364b1b4a3
25fdd61924ec43f68f6d130ac257deb1css test94b3e26ee717c64999d7867364b1b4a3
25fdd61924ec43f68f6d130ac257deb1css test94b3e26ee717c64999d7867364b1b4a3
25fdd61924ec43f68f6d130ac257deb1css test94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

0923.css

h1{
    color: yellow;
}

#p1{
    color: aqua;
    font-size: 20px;
}
.p2{
      color: red;
      font-size:40px;
}

Résumé : ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le didacticiel vidéo de base CSS , le didacticiel vidéo CSS3 , didacticiel vidéo bootstrap  !

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!