Que sont les sélecteurs CSS ? Que sont les sélecteurs CSS ?-tutoriel CSS-php.cn

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

青灯夜游

Libérer： 2018-10-20 16:48:55

original

4180 Les gens l'ont consulté

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;}

Copier après la connexion

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;}

Copier après la connexion

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;
　　　　……
　　}

Copier après la connexion

Par exemple :

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

Copier après la connexion

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>

Copier après la connexion

Définir le style du haut :

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

Copier après la connexion

html

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS 常用选择器</title>
<link rel="stylesheet" type="text/css" href="0923.css">
</head>
<body>

<!--
id 选择器
-通过id属性值选中唯一的元素
- #id属性名{}


class 类选择器
-通过类选择器，选中一组
-.class属性名{}

-->
<h1>HTML选择器</h1>
<p id="p1">css test</p>
<p class="p2">css test</p>
<p class="p2">css test</p>
<p class="p2">css test</p>

</body>
</html>

Copier après la connexion

0923.css

h1{
    color: yellow;
}

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

Copier après la connexion

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!