Plusieurs sélecteurs couramment utilisés en CSS3

Après la naissance du HTML au début des années 1990, le CSS est né fin 1996. CSS est spécifiquement conçu pour définir les attributs de base des pages web. Alors en CSS3, quels sont les sélecteurs couramment utilisés ? Permettez-moi de vous le présenter aujourd'hui.

La naissance du HTML au début des années 1990

Fin 1996, la première version de CSS est née

Mai 1998, CSS2 est officiellement publié

2004 CSS2 .1 Release

Release of CSS3 2002 2003 2004 2005 2007 2009 2010

Développement modulaire

CSS1 définit les attributs de base de la page Web :

Police, couleur, Sélecteur de base, etc.

CSS2 ajoute des fonctions avancées basées sur CSS1

Flottant et positionnement, sélecteurs avancés, etc. (sous-sélecteur, Sélecteur de voisin relatif, Sélecteur universel)

CSS3 suit un développement modulaire. Le moment de la libération n’est pas un moment précis, mais une période de temps.

Sélecteur universel : * Sélectionnez tous les éléments

Sélectionnez les éléments enfants :> Sélectionnez les descendants directs des éléments

Sélecteurs frères et sœurs adjacents : + Sélectionne le premier élément immédiatement après l'élément cible

Sélecteur frère ordinaire : ~ Sélectionne tous les éléments frères et sœurs qui le suivent immédiatement

:nth-child Sélectionne l'index spécifié L'élément enfant

au nième- child(n) Le nième élément enfant sous l'élément parent

) Élément enfant pair

:nth-last-child(n) Le nième élément enfant à partir du bas

:nth-of-type(n) Le nième enfant du type spécifié sous l'élément parent Element

:nth-last-of-type Le nième élément enfant du type spécifié sous l'élément parent

:first-child Sélectionne le premier élément enfant sous l'élément parent

:last-child sélectionne le dernier élément enfant sous l'élément parent

:only-child sélectionne le seul élément enfant sous l'élément parent

:only-of-type sélectionne l'élément parent Le seul sous-élément du type spécifié sous

:root sélectionne le répertoire racine du document et renvoie le html

E[attr] nom de l'attribut, pas sûr de la valeur d'attribut spécifique

E[attr ="value"] spécifie le nom de l'attribut et spécifie sa valeur d'attribut correspondante

E[attr ~="value"] spécifie le nom de l'attribut, qui a plusieurs valeurs d'attribut séparées par des espaces, et contient     value

E[attr ^= "value"] spécifie le nom de l'attribut, et le la valeur de l'attribut commence par value

E[attr $="value"] spécifie le nom de l'attribut et la valeur de l'attribut se termine par value

E[attr *="value"] spécifie l'attribut name, et la valeur de l'attribut contient value

E[attr |= "value"] spécifie le nom de l'attribut, et la valeur de l'attribut commence par value-

UI Pseudo

Class Selector

: :enabled Sélectionnez l'élément d'état activé

:disabled Sélectionnez l'élément d'état désactivé

:checked Sélectionnez celui sélectionné Éléments de saisie (boutons radio ou cases à cocher)

:default Sélectionnez l'élément par défaut

:valid, invalid Sélectionnez les éléments d'entrée valides ou invalides en fonction de la validation de l'entrée

 : éléments de sélection dans la plage et hors plage dans ou en dehors de la plage spécifiée

:repuired, facultatif sélectionner les éléments d'entrée en fonction du fait que l'attribut requis est autorisé ou non

Sélecteur de pseudo-classe dynamique

 : :link sélectionne l'élément de lien

:visited sélectionne l'élément auquel l'utilisateur peut accéder

:hover sélectionne l'élément survolé par la souris

:ative L'événement déclenché lorsque la souris est cliqué

:focus L'élément actuellement focalisé

Autres sélecteurs de pseudo-classe :

:not(< selector >) Annuler la sélection du sélecteur entre crochets

:lang() Élément basé sur lang

attribut global

:target url fragment L'élément pointé par l'identifiant

:empty sélectionne l'élément avec un contenu vide

:selection Le curseur de la souris sélectionne le contenu de l'élément

C'est tout pour les sélecteurs CSS3, plus excitant Veuillez faire attention aux autres articles connexes sur php Site chinois !

Lecture connexe :

Quels sont les nouveaux attributs d'arrière-plan dans CSS3

Comment utiliser Demandes de renseignements sur les médias CSS3

Comment faire une boîte flexible en CSS3

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!