La cascade de styles CSS signifie que lorsque plusieurs règles CSS sont appliquées au même élément, le style final appliqué est déterminé en fonction de la priorité de la règle et de la spécificité de la règle.
Dans le développement Web, la nature en cascade des styles est très importante. Grâce à la mise en cascade, les développeurs peuvent facilement offrir une flexibilité dans la conception et la mise en page des sites Web, et rendre les styles plus cohérents et plus faciles à maintenir. Comprendre les principes et l'utilisation de la cascade de styles est une connaissance de base essentielle pour tout développeur front-end.
Tout d'abord, la cascade de styles CSS détermine quel style sera appliqué à l'élément en fonction de la priorité de la règle. La priorité est divisée en quatre niveaux de haut en bas :
- Style en ligne : Le style spécifié directement dans l'attribut style de la balise de l'élément HTML a la priorité la plus élevée. Par exemple :
<div style="color: red;">Hello World!</div>
<div style="color: red;">Hello World!</div>- ID选择器（ID Selector）：使用
#符号加上唯一的ID来指定的样式。例如：#myId { color: blue; }
- 类选择器和属性选择器（Class and Attribute Selectors）：使用
.符号加上类名或使用[]符号加上属性名来指定的样式。例如：.myClass { color: green; } 或 [type="text"] { border: 1px solid black; }
- 标签选择器和伪类选择器（Tag and Pseudo-class Selectors）：指定元素标签名或者特定状态的选择器，如
a、div:hover。例如：h1 { font-size: 20px; } 或者 a:hover { text-decoration: underline; }
其次，在相同优先级的规则中，特异度（Specificity）会影响样式层叠性。特异度是一个用于衡量样式规则的相对权重的值，它由四部分组成，分别是：内联样式的权重、ID选择器的权重、类选择器和属性选择器的权重、标签选择器和伪类选择器的权重。其中，内联样式的权重最高，ID选择器的权重次之，类选择器和属性选择器的权重再次之，标签选择器和伪类选择器的权重最低。特异度值越高的规则，优先级越高，会覆盖特异度值较低的规则。
除了以上两点，还有一些其他的规则和特殊情况会影响CSS样式的层叠性：
- !important规则：在样式中使用!important规则可以将该样式规则的优先级提升到最高。使用!important规则需谨慎，因为过度使用会导致CSS代码难以维护。
- 继承性：某些样式属性具有继承性，即子元素会继承父元素的样式。当子元素和父元素都有相同属性的样式时，子元素的样式会覆盖父元素的样式。
下面是一个具体的CSS代码示例，用以说明样式层叠性的运用：
<!DOCTYPE html>
<html>
<head>
<style>
/* 内联样式 */
p {
color: red !important;
}
/* ID选择器 */
#myId {
color: blue;
}
/* 类选择器和属性选择器 */
.myClass {
color: green;
}
/* 标签选择器和伪类选择器 */
a {
color: purple;
}
</style>
</head>
<body>
<div id="myId" class="myClass">
<p>Hello World!</p>
<a href="#">Visit us</a>
</div>
</body>
</html>Copier après la connexion
在上面的示例中，首先我们给p元素添加了一个具有最高优先级的内联样式，设置其颜色为红色，并使用了!important规则。接着，我们为div元素设置了一个ID选择器样式，设置其颜色为蓝色。然后，我们为div元素添加了一个类选择器样式和一个标签选择器样式，颜色分别为绿色和紫色。
最终，p元素的颜色将应用内联样式的红色，而divSélecteur d'ID : utilisez le symbole # code> plus un identifiant unique pour spécifier le style. Par exemple : <code>#myId { color: blue; }
Sélecteurs de classe et d'attribut : utilisez le symbole
. plus le nom de la classe Ou utilisez le
[ ] plus le nom de l'attribut pour spécifier le style. Par exemple :
.myClass { color : vert } ou
[type="text"] { border : 1px solid black >sélecteur de balises et pseudo ; Sélecteurs de balises et de pseudo-classes : sélecteurs qui spécifient des noms de balises d'éléments ou des états spécifiques, tels que a, div:hover. Par exemple : h1 { font-size: 20px; ou <code>a:hover { text-decoration: underline }
Deuxièmement, dans le même Parmi les règles de priorité, la spécificité affecte la cascade de styles. La spécificité est une valeur utilisée pour mesurer le poids relatif des règles de style. Elle se compose de quatre parties : le poids des styles en ligne, le poids des sélecteurs d'ID, les poids des sélecteurs de classe et d'attribut, les sélecteurs d'étiquettes et le poids du pseudo- sélecteur de classe. Parmi eux, les styles en ligne ont le poids le plus élevé, suivis par les sélecteurs d'ID, les sélecteurs de classe et les sélecteurs d'attributs, et les sélecteurs d'étiquettes et les sélecteurs de pseudo-classe ont les poids les plus faibles. Les règles avec des valeurs de spécificité plus élevées ont une priorité plus élevée et remplaceront les règles avec des valeurs de spécificité plus faibles. 🎜🎜En plus des deux points ci-dessus, il existe d'autres règles et situations particulières qui affecteront la nature en cascade des styles CSS : 🎜🎜🎜!règle importante : L'utilisation de la règle !important dans un style peut augmenter la priorité du style. gouverner au plus haut niveau. Utilisez la règle !important avec prudence, car une utilisation excessive peut rendre le code CSS difficile à maintenir. 🎜Héritage : certains attributs de style sont héritables, c'est-à-dire que les éléments enfants hériteront du style de l'élément parent. Lorsqu'un élément enfant et un élément parent ont des styles avec le même attribut, le style de l'élément enfant remplacera le style de l'élément parent. 🎜Ce qui suit est un exemple de code CSS spécifique pour illustrer l'utilisation de la cascade de styles : 🎜rrreee🎜Dans l'exemple ci-dessus, nous avons d'abord ajouté l'élément
p Un style en ligne avec la priorité la plus élevée, définissez sa couleur sur rouge et utilisez la règle
!important. Ensuite, nous définissons un style de sélecteur d'ID pour l'élément
div et définissons sa couleur sur bleu. Ensuite, nous avons ajouté un style de sélecteur de classe et un style de sélecteur d'étiquette à l'élément
div, avec respectivement les couleurs verte et violette. 🎜🎜Finalement, la couleur de l'élément
p aura la couleur rouge du style en ligne appliqué, tandis que la couleur de l'élément
div aura le style bleu de l'ID sélecteur appliqué. En raison des règles de spécificité, les styles de sélecteur de classe et les styles de sélecteur d'étiquette sont ignorés. Ainsi, le résultat final est « Hello World ! » en rouge et « Visitez-nous » en bleu. 🎜🎜En résumé, la cascade de styles CSS détermine le style final appliqué grâce à la priorité et à la spécificité des règles. Comprendre les principes de la cascade et apprendre à utiliser les règles de la cascade de manière flexible aidera les développeurs à mieux contrôler et gérer les styles CSS et à répondre aux divers besoins de conception du site Web. 🎜
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
