Explication détaillée de divers sélecteurs CSS et feuilles de style d'importation ainsi que de certains sélecteurs de pseudo-classes

(1) Sélecteur CSS :

1. Sélecteur de balise : sélectionnez directement la balise via le nom de la balise HTML

2. Sélecteur de classe : via le nom du sélecteur { } Pour sélectionner balises avec attribut de classe ajouté

　　3. Sélecteur d'ID : utilisez #name of selector{} pour sélectionner les balises avec l'attribut ID ajouté. L'ID est unique dans le document HTML

4. Sélecteur universel : utilisez. *{} pour sélectionner toutes les balises du document HTML

5. Sélecteur descendant : Sélecteur 1 (espace) Sélecteur 2 pour sélectionner une balise Toutes les sous-balises correspondantes

6. Sélecteur enfant : Sélecteur 1 > Sélecteur 2 pour sélectionner les sous-balises de génération directe dans une balise, ce qui ne fonctionne pas pour les plus profondes

7. Sélecteur d'intersection : Sélecteur 1 (pas d'espace au milieu) Sélecteur 2 Par exemple, # li.li{} sélectionne une balise avec ID=li et class=li

8. Sélecteur d'union : Sélecteur 1. Sélecteur 2 Par exemple : #li.li{} sélectionne la balise avec ID=li ou class =li

(2) Priorité du sélecteur :

1. Traiter comme utilisé pour le même Les labels du calque, par exemple, agissent tous directement sur le label li : ID selector> Sélecteur de classe>Sélecteur d'étiquette>Sélecteur universel

　　2. Le sélecteur le plus interne a priorité sur celui externe : div ul li>La balise #ul li se trouve du côté le plus interne de ul. sélecteur

3. S'il est utilisé sur le même calque et que le dernier sélecteur de calque est le même, celui qui est le plus précis aura la priorité. Plus le niveau est élevé : div ul li>div li

. 4. Lorsque les priorités sont exactement les mêmes, les styles ultérieurs remplaceront désormais les styles précédents

Supplément : 5. Algorithme de priorité : style = 1000 (feuille de style en ligne) id = 100 (sélecteur d'identifiant) classe = 10 (sélecteur de classe) element = 1 (sélecteur d'étiquette) Utilisation : Le principe est qu'il agit sur la même couche : comme #ul li{} et ul # Lequel des deux a la priorité la plus élevée #ul li{}La priorité ? s'exprime comme 101 (100 1), et la priorité de ce dernier est 101 (1 100), donc la priorité est la même, à condition que les deux sélecteurs doivent agir sur le même calque

(3) Trois façons de lier la feuille de style : importer la feuille de style

1. Feuille de style en ligne : écrite dans la balise HTML, via l'attribut style , a la plus haute priorité, mais la combinaison du code HTML et du code CSS n'est pas conforme la norme CSS de "séparation du contenu et du style", et n'utilise pas de maintenance ultérieure

2. Feuille de style interne : Écrit dans le style de sous-balise de l'en-tête, le contenu et le style sont séparés dans une certaine mesure, mais la méthode de référence de réutilisation de style ne peut pas être réalisée :

3. Feuille de style externe : réalise la séparation du contenu et du style, facilite la maintenance et la réutilisation ultérieures, est conforme aux normes du W3C et a la priorité la plus basse : passez

　4. Importer une feuille de style : dans le style de feuille de style interne, importez la feuille de style CSS

via @import url (adresse de la ressource CSS). Remarque : Feuille de style interne La différence entre l'importation et l'importation :

. 1) La balise de lien est une balise html, mais l'importation ne l'est pas

2) Le lien peut créer un lien vers diverses ressources, tandis que l'importation ne peut importer que des feuilles de style CSS

3) La balise de lien agit comme un pont entre le code hmtl et le style css, reliant le code css, tandis que import importe la feuille de style css, qui importera le fichier CSS dans HMTL lorsque le document sera chargé

4) La méthode du lien consiste à lier le Style CSS pendant le chargement du document, tandis que l'import consiste à importer le style CSS

après le chargement du document

En conclusion, il est préférable de sélectionner la balise de lien pour lier

(4) Sélecteur de pseudo-classe :

Nom du sélecteur : Pseudo-class {}, un état de l'étiquette de pseudo-classe, par exemple : a:link{} : L'étiquette a label est le style de l'orientation ;a:hover{} : Le style affiché lorsque la souris est placée sur l'étiquette a ; a:active{} : Le style affiché lorsque la souris est enfoncée sur l'étiquette a a:visited{} : Affiché lorsque l'étiquette a est visitée, cela peut également être : a:first-chird{} signifie que la balise a a un conteneur parent et que la première balise enfant a sous le conteneur parent est sélectionnée

Plus détaillé explication des différents sélecteurs CSS et styles d'importation. Il existe également des articles liés aux sélecteurs de pseudo-classes. Veuillez faire attention au site Web PHP chinois !