La différence entre les pseudo-classes et les pseudo-éléments
(1) Classe, nom de classe défini par l'utilisateur. Cette classe est spécifique et visible, comme div.div0 Sélectionnez l'élément div avec la classe div0.
(2) Pseudo-classe, utilisée pour ajouter des effets spéciaux à certains sélecteurs. Les styles définis avec des pseudo-classes n'agissent pas sur la marque, mais sur l'état de la marque, comme :hover pour la balise a et :disabled pour l'élément form.
(3) Les éléments, tels que div, p, h1, etc., sont des éléments réels.
(4) Les pseudo-éléments sont des éléments qui n'existent pas en HTML et ne sont utilisés que pour le rendu en CSS. Les pseudo-éléments créent un conteneur virtuel. Ce conteneur ne contient aucun élément DOM, mais peut contenir du contenu. Tels que ::avant, ::après.
Sélecteur de pseudo-classe
Le but des pseudo-classes est d'utiliser des sélecteurs pour trouver des informations qui n'existent pas dans l'arborescence DOM et qui ne peuvent pas être obtenues par les sélecteurs CSS classiques. Les pseudo-classes représentent généralement un « état ». Une pseudo-classe commence par deux points : suivi du nom de la pseudo-classe et des paramètres facultatifs entre parenthèses.
pseudo-classe d'ancrage
Si vous définissez les quatre états d'une balise, l'ordre doit être LVHA, c'est-à-dire : link, :visited, :hover, :active.
Dans des circonstances normales, il vous suffit de définir l'effet par défaut de la balise a et l'effet du croisement de la souris, a{}, a:hover{}.
sélecteur de pseudo-classe cible
:target Style cible après l'hyperlien Lorsqu'un hyperlien est utilisé, la cible du lien peut être définie avec le sélecteur de cible. Le style correspondant ne sera affiché qu'après le saut de la cible.
La valeur de l'attribut href de la balise a peut pointer vers l'adresse du lien, l'identifiant de la balise ou le nom de la balise a.
<style>:target{font-size:20pt;border:1pxsolidgray;}div:target{background-color:#ccc;}</style><p><ahref=#news1>Bouton 1</a></ p><p><ahref=#news2>Bouton 2</a></p><aname=news1>Contenu 1</a><divid=news2>Contenu 2</div>Lorsque le bouton 2 est cliqué, le résultat s'affiche :
Sélecteur de pseudo-classe d'élément de formulaire
:in-range ne fonctionne que sur les éléments pouvant spécifier des valeurs d'intervalle, tels que les attributs min et max dans l'élément d'entrée ;
:invalid ne fonctionne que sur les éléments qui peuvent spécifier des valeurs d'intervalle, tels que les attributs min et max dans l'élément |input, le champ de courrier électronique correct, les champs numériques légaux, etc.
Sélecteur de pseudo-classe structurelle
<style>p:first-child{color:red;}/*Le premier élément est h1, il n'est donc pas sélectionné*/p:first-of-type{color:blue;}p:nth-child(4) { color:green;}/*Le quatrième élément est sp an, donc il n'est pas sélectionné*/p:nth-of-type(4){color:pink;}p:only-child{color:yellow;}/*Le 7ème p est sélectionné, mais le style est écrasé* / p:uniquement-de-type{color:orange;}/ *Les 7ème et 8ème p sont sélectionnés*/</style><h1>Titre 1</h1><p>Le premier p</p><p>Le deuxième p</p><span >Contenu du texte</ span><p>Le troisième p</p><p>Le quatrième p</p><p><i>Contenu textuel</i>Le cinquième p</p> <p>Le sixième p</p><h5>Titre 5</h5><div><p>Le septième p</p></div><div><p>Le huitième p</p> p ><span>Contenu du texte</span></div><div><p>Le neuvième p</p><p>Le dixième p</p></div>Résultats en cours d'exécution :
Annuler les sélecteurs de pseudo-classe
Pseudo-élément
Les pseudo-éléments créent des éléments abstraits dans l'arborescence DOM. Ces éléments abstraits n'existent pas dans le langage du document (peuvent être compris comme du code source HTML). Par exemple : l'interface du document ne fournit pas de mécanisme pour accéder au premier mot ou à la première ligne du contenu de l'élément, mais des pseudo-éléments permettent aux développeurs d'extraire ces informations. De plus, certains pseudo-éléments permettent aux développeurs d'obtenir du contenu qui n'existe pas dans le document source. Un pseudo-élément commence par deux deux-points ::, suivis du nom du pseudo-élément.
En termes simples, les pseudo-éléments créent un conteneur virtuel qui ne contient aucun élément DOM, mais peut contenir du contenu.
Dans le sélecteur de pseudo-éléments en CSS3 et le sélecteur de pseudo-classes en CSS2, avant et après sont exactement les mêmes.
Il n'y a que les pseudo-éléments suivants :
L'attribut content est utilisé avec les pseudo-éléments :before et :after pour insérer le contenu généré. Vous pouvez utiliser des pseudo classes + des pseudo éléments.
Poids du style CSS
règles de priorité CSS :
(1) Lorsque les valeurs de poids des règles de sélection CSS sont différentes, celle avec la valeur de poids la plus élevée aura la priorité ;
(2) Lorsque les valeurs de poids des règles de sélection CSS sont les mêmes, la règle définie ultérieurement prévaut ;
(3) Lorsque !importand est ajouté après l'attribut CSS, une priorité absolue inconditionnelle sera donnée ;
Calcul de la valeur du poids :