partage d'exemple de sélecteur CSS

J'apprends actuellement à utiliser les sélecteurs jquery, qui sont similaires à la plupart des sélecteurs en CSS. Voici un résumé des sélecteurs CSS pour une comparaison et une étude futures.

Tout d'abord, le sélecteur d'élément :

Sélecteur de caractère générique : *{} Généralement utilisé pour éliminer globalement les propres effets du navigateur

Sélecteur de type : E{} Balises html, généralement utilisées pour éliminer certains effets intégrés spécifiques au navigateur

sélecteur d'identifiant : #myid{} Généralement utilisé pour spécifier des effets spécifiques ou pour nommer des zones spéciales. Apprenez à utiliser les fonctionnalités qui ne peuvent avoir qu'un seul identifiant

Sélecteur de classe : .myclass{} Principalement utilisé pour définir des effets spéciaux et utiliser la classe pour mettre en page la page Web à l'aide de plusieurs fonctionnalités

Deuxièmement, le sélecteur de relation :

Contient le sélecteur : E F (notez que le symbole ici est un espace, le sélecteur de relation) est utilisé depuis longtemps lors de la définition des effets de page Web. , ce que je comprends concerne un positionnement précis

Remarque : le sélecteur d'inclusion est également appelé sélecteur de sous-classe à certains endroits, et les sous-classes ici seront implémentées quelle que soit leur profondeur d'imbrication, comme indiqué ci-dessous

                                                                                     Remarque : Il ne peut s'agir que du bas de l'élément parent. Un élément enfant de premier niveau. ne peut pas être un élément enfant d'un élément enfant. Veuillez distinguer cela du sélecteur de sous-classe ci-dessus.

Sélecteur adjacent : E+F Si vous souhaitez

sélectionner un élément immédiatement après un autre élément, et que les deux ont le même élément parent, vous pouvez utiliser le sélecteur Brother adjacent.                                                                                                                      

Remarque : Tous les mêmes éléments sauf E seront sélectionnés ici, qui ne sont pas couramment utilisés en développement.

Troisièmement, sélecteur d'attribut : (moins fréquemment utilisé)

Classification de sélecteurs d'attributs : E[att], E[att="val"], E[att~="val"], E[att^="val"], E[att$="val" ]
, E[att*="val"], E[att|="val"]

Fonctions spécifiques :

                                  att] : Sélectionnez l'élément E

avec l'attribut att "val"] : Sélectionnez l'élément E

avec l'attribut att et la valeur d'attribut égale à val                                                                                                                                                                                                                                                                                              

🎜>

E[att^="val"] : Sélectionnez l'élément E qui a l'attribut att et la valeur de l'attribut commence par val.

                        E[att$="val"] :Sélectionnez l'élément E qui possède l'attribut att et la valeur de l'attribut se termine par une chaîne de val

                                                                                                                                                                        
                                                                         🎜>                                                  "val"] : sélectionne les éléments E qui ont l'attribut att et dont la valeur d'attribut est une chaîne commençant par val et séparés par le connecteur "-".

Résumé : Utilisez ~ pour les espaces, ^ et $ au début et à la fin, * pour l'inclusion, et spécial - format Spécial |

Quatrième sélecteur de pseudo-classe : (accentuation, utilisé pour certains effets de mise en page spéciaux)
À propos du sélecteur de pseudo-classe d'hyperlien a

E: lien Style avant d'accéder E: visité Après avoir été visité Style

E:hover L'effet lorsque la souris est placée sur un lien hypertexte (utilise souvent

)

E:active Événements qui se produisent entre le clic et le relâchement de la souris

E:focus Lorsque le focus est relâché, l'événement onfocus de l'objet se produit

Autres sélecteurs de pseudo-classe :

E:lang() Correspond au langage spécial utilisé

                                                                                                                                                                                   Objet

                                            L'élément racine du document. En HTML, l'élément racine est toujours html.

E:first-child Correspond au premier élément enfant E de l'élément parent Remarque : utilisé lorsqu'il y a une grande quantité de contenu, définissez des effets spéciaux

E:last-child Correspond au dernier élément enfant de l'élément parent

E:only-child Correspond au seul élément enfant de l'élément parent E Remarque : Pour que cet attribut prenne effet, il ne peut y avoir qu'un seul élément enfant. (Rappelez-vous qu'il est également utilisé dans jquery)

E:nth-child(n) Correspond au nième élément enfant de l'élément parent Remarque : vous pouvez définir le nombre pair via la syntaxe ici Ou nombre impair (de base)

E:nth-last-child(n) Correspond au nième élément enfant du dernier à l'élément parent E

                                                                                                                                                                    🎜>
E:last-of-type

correspond au dernier élément frère E

​E:only-of-type 
Correspond au seul élément frère du même type E

E:nth-of-type(n) Correspond au nième élément frère E du même type

E:nth-last-of-type Correspond à l'avant-dernier nième élément frère du même type E

E : élément correspondant vérifié E dans l'état sélectionné sur l'interface utilisateur. (Utilisé lorsque le type d'entrée est radio et case à cocher)
                                                                                                                                                                                                                                                                         . Autrement dit, le sens littéral est

                                                                                                                                                                                              . Cela signifie littéralement

     

Cinquième, sélecteur de pseudo-objet :

Couramment utilisé :

E:avant/ E::before Le double côlon est désormais la méthode d'écriture recommandée, le simple deux-points est toujours applicable

E:after/E::after

E :: SELECTION Définit le style lorsque l'objet est sélectionné (généralement utilisé pour afficher un affichage de texte spécial de B, visage sérieux. Faites attention à deux colonies)

PREMIÈRE LIGNE/ E ::first-line Définir le style de la première ligne de l'objet (je suis trop paresseux pour l'écrire, je ne l'utilise pas beaucoup de toute façon. Vous pouvez consulter le document d'aide) letter                    Définir le style du premier caractère dans l'objet (ceci est souvent utilisé dans la rédaction d'articles, évidemment il est rarement utilisé sur le marché maintenant)

Recommandations associées :

CSS Explication détaillée de la nouvelle utilisation de sélecteurs

Méthode d'implémentation de l'analyse du champ du sélecteur CSS

Explication détaillée du sélecteur CSS Selector

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!