Résumé de l'utilisation des sélecteurs CSS

Cette fois, je vais vous apporter un résumé de la façon d'utiliser les sélecteurs CSS, et quelles sont les précautions d'utilisation des sélecteurs CSS. Ce qui suit est un cas pratique, jetons-y un coup d'œil.

Sélecteur CSS

1.id selector #id{ }, "#id" sélectionne l'élément
2 Class selector.class{ }, ".class name" sélectionne l'élément <.>3.
Sélecteur de balise p{ }, "nom de la balise" sélectionne l'élément 4.
Sélecteur de caractères génériques { }, "" Sélectionnez tous les éléments 5. Sélecteurs combinés :
Sélecteurs de groupe E, F "," séparés par des virgules, sélectionnez les éléments E, F en même temps

Sélecteurs descendants E F séparés par des espaces , sélectionnez tous les F éléments sous l'élément E (peu importe le nombre de niveaux où l'élément F est imbriqué, il sera toujours sélectionné) Sous-sélecteur direct E > F ">" sélectionne le sous-élément direct F sous l'élément E élément, C'est-à-dire le sous-élément de premier niveau F

sélecteur de frère ou sœur adjacent E + F sous l'élément E, "+" sépare le directement adjacent élément F après la sélection l'élément E Sélecteur général adjacent E ~ F, "~" sépare tous les éléments frères F
après l'élément E sélectionné et 6. Sélecteur de pseudo-classe
L-V-H-A, :link,:visited,:hover,:active7. Sélecteur de pseudo-éléments
E::first-line sélectionne la première ligne du contenu de l'élément E
E::first-letter sélectionne l'élément E content La première lettre de
E::before insère du contenu avant l'élément E
E::after insère du contenu après l'élément E
avant et après sont des emplacements où du contenu supplémentaire peut être inséré et doit être mis en correspondance avec contenu Utilisation de l'attribut
8.
Sélecteur d'attribut input[type="text"] {
width:150px
}

---

sélecteur; La priorité du

noyau de priorité du sélecteur CSS : Chaque sélecteur a sa propre priorité, et plus la portée est spécifique, plus la priorité est élevée. Les priorités CSS de haut en bas sont :
1. L'utilisation de !important après un attribut remplacera le style d'élément défini n'importe où sur la page.
2. Styles en ligne écrits en tant qu'attributs de style sur les balises d'élément
3.sélecteurs d'id
4. Sélecteurs de classe
5. sélecteur
8. Sélecteur générique
9. Personnalisation du navigateur
Lorsque la règle de style CSS est composée de plusieurs sélecteurs, le poids du sélecteur d'identifiant est de 1000. Le sélecteur de classe est de 100 et le sélecteur d'étiquette est de 10. Lequel la priorité est déterminée par la somme des poids. Lorsque les poids de deux règles CSS sont identiques, celle qui est la plus spécifique sera utilisée, c'est-à-dire que le sélecteur avec un poids plus élevé sera plus spécifique et aura une priorité plus élevée. Lorsque les deux règles de sélection et les poids sont identiques, le style le plus récent écrasera le précédent !
p {color: #333;>
p {color: #666;>
De cette façon, la couleur de la copie p sera évidemment #666


Utilisation scénarios de classe et d'identifiant

---

id est un identifiant unique sur la page, et la classe identifie un certain type de style sur la page. Il est universel et peut être utilisé à plusieurs reprises. Le nom de classe d'un élément peut être écrit sous la forme class="intro other", c'est-à-dire qu'il peut y avoir plusieurs noms de classe, ce qui signifie superposer les styles correspondant aux deux noms de classe. Le nom d'identification ne peut pas être écrit ainsi. Les noms d'ID sont souvent utilisés dans la mise en page (marquage de grands cadres), et les classes sont généralement utilisées dans les mises en page locales pour la définition du style. Étant donné que le nom de la classe peut être écrit de la même manière lors de la dénomination, vous n'avez besoin d'écrire le style qu'une seule fois pour la classe. , et il peut être utilisé par tout le monde.

Délimitation des espaces de noms appropriés lors de l'utilisation des sélecteurs CSS pour améliorer la lisibilité du code et faciliter la maintenance

---

Exemples d'utilisation des sélecteurs

html
#header{} /*选中id为header的元素*/
.header{}    /*选中class=header的元素*/ 
.header .logo{}  /*选中class=header下的所有class=logo的元素*/ 
.header.mobile{}  /*选中class="header mobile"的元素*/ 
.header p, .header h3{}  /*选中class=header元素下的所有p元素，同时选中class=header元素下的所有h3元素*/ 
#header .nav>li{}  /*选中id=header元素下的所有class=nav元素的直接子元素li*/ 
#header a:hover{}  /*选中id=header元素下的所有a元素，并使用hover伪类*/

---

Sélecteurs de pseudo-classes courants

[1]Sélecteurs de pseudo-classes structurelles
E:first-child sélectionne le premier élément enfant sous l'élément parent où se trouve E, et l'élément enfant est l'élément E
E:last-child sélectionne le dernier élément enfant sous l'élément parent où se trouve E, et l'élément enfant est l'élément E
E:root sélectionne l'élément du nœud racine où se trouve E Pour HTML, il sélectionne l'élément HTML
E:nth-child(n) sélectionne le nième élément enfant sous. l'élément parent où se trouve E et l'élément enfant est E element
E:nth-last-child(n) sélectionne le nième élément enfant en bas sous l'élément parent où se trouve E, et l'élément enfant est Élément E
E:nth-of-type(n) sélectionne E Le nième élément E parmi les éléments du même type sous l'élément parent
E:nth-last-of-type(n) Sélectionne le nième Élément E du bas parmi les éléments du même type sous l'élément parent où se trouve E
E:first-of-type Sélectionne le premier élément E parmi les éléments du même type sous l'élément parent où se trouve E
E:last-of-type Sélectionne le dernier élément du même type sous l'élément parent où se trouve E element
E:only-child correspond au seul élément enfant de l'élément parent, ce qui équivaut à : first-child:last-child or:nth-child(1):nth-last-child(1)
E:only-of-type correspond au seul élément enfant utilisant la même balise sous l'élément parent, qui est équivalent à :first-of-type:last-of-type ou :nth-of-type(1):nth-last -of-type(1)
E:empty correspond à un élément qui n'a pas d'éléments enfants , et l'élément n'a aucun nœud de texte
E:not(F) correspond à tout élément qui ne correspond pas au sélecteur actuel
【2 】Sélecteur de pseudo-classe dynamique Commande L-V-H-A
link-visited-hover-active

a:link{
 color:red;
 }
 
 a:visited{
 color:blue;
 }
 
 a:hover{
 color:gree;
 font-size:20px;
 }
 
 a:active{
 color:gold;
 }
 a:focus{
 color:gold; //a元素获得焦点后的样式
 }

:premier-enfant et:premier-de-type Les fonctions et différences de

E:premier-enfant spécifie l'élément E et trouve le premier élément E sous son élément parent
E : first-of-type spécifie l'élément de type E et trouve son élément parent Le premier

---

code exemple ci-dessous :

html
<style>
.item1:first-child{ color: red;}
.item1:first-of-type{ background: blue;}
</style> 
<p> 
</p><p>aa</p>
<h3>bb</h3>
<h3>ccc</h3> 

.item1:first-child{color:red;}class= La police item1 du premier élément enfant sous l'élément parent p de l'élément item1 est rouge <h3>bb<h3>,<h3>ccc<h3></h3> </h3> </h3> </h3> Bien que class=item1, ils ne sont pas le premier élément enfant sous son élément parent.

.item1:first-of-type{background:blue;}Le premier élément de class=item1 parmi les éléments du même type sous l'élément parent de l'élément class=item1. Le même type d'éléments (p, h3) sous l'élément parent p de <p class="item1">aa</p> sélectionnez le premier, aa, bb, avec un fond bleu.

---

text-align : Le rôle du centre

Définit l'alignement central horizontal du texte dans l'élément. text-align est appliqué aux éléments de niveau bloc (p ou p). peut définir l'alignement des éléments en ligne (texte, images, zones de saisie) à l'intérieur de l'élément de niveau bloc (p/p).
text-align a 5 valeurs : gauche/droite/centre/justifier/hériter, aligné à gauche/aligné à droite/aligné au centre/aligné aux deux extrémités/hériter de la valeur d'alignement de l'élément parent. Lors de la justification des deux extrémités, l'espacement des mots dans chaque ligne peut être incohérent.

---

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment gérer l'accès refusé à la base de données MySQL

Explication détaillée des étapes pour utiliser le front -fin de la pyramide des tests

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!