Maison > Article > interface Web > Une brève introduction aux sélecteurs CSS
Avant-propos : Il s'agit de la propre compréhension et organisation de l'auteur après ses études. S'il y a des erreurs ou des questions, veuillez les corriger et je continuerai à mettre à jour !
Si le poids du sélecteur est représenté par 4 chiffres, alors :
Le poids du sélecteur d'élément est de 1 ; le poids du
sélecteur d'identifiant est de 100 ; Le poids du sélecteur de classe
Sélecteur CSS
Introduction : Sélecteur de caractère générique, *{...}, l'astérisque représente un sélecteur de caractère générique, qui peut correspondre à n'importe quel élément
, le sélecteur d'attribut est basé sur l'attribut et la valeur d'attribut de l'élément. Il existe de nombreuses façons de sélectionner des éléments :
Sélecteur d'attribut simple : img[title], obtenez l'élément img avec l'attribut alt défini #wrapper[outter], Récupère l'élément dont l'identifiant est wrapper et possède l'attribut wrapper ;
, séparez les sélecteurs à regrouper par un signe supérieur à, #wrapper > #content{...}, à l'intérieur de l'objet élément avec l'identifiant du wrapper, obtient les Éléments enfants, recherchez uniquement un niveau vers le bas ; Les sélecteurs d'éléments enfants et les sélecteurs descendants ne sont pas les mêmes, Les sélecteurs descendants incluent les sélecteurs d'éléments enfants et les sélecteurs descendants continueront pour rechercher vers le bas;
Sélecteur d'éléments frères et sœurs adjacents (IE6 et suivants ne sont pas pris en charge), séparez les sélecteurs à regrouper par un signe plus, .wrapper + .content{...}, après avoir obtenu l'élément avec le wrapper de classe, l'élément suivant avec le contenu de la classe, et La différence entre le sélecteur de frère universel
est que le sélecteur de frèreMême s'il y a le même élément plus tard, il ne peut pas l'être. sélectionné ;
tous les éléments avec un contenu de classe sont différents des sélecteurs frères adjacents ;
Sélecteur de pseudo-classe (non pris en charge par IE8 et versions antérieures) :
:root sélectionne l'élément racine du document, c'est-à-dire l'élément html
input:focus, la zone de saisie actuelle obtient le focus
;élément:hover, la souris survole l'élément actuel
p:nth- ; of-type(n), La sélection est le nième p élément de son élément parent C'est calculé n dans l'ordre du <.> p éléments à l'intérieur de l'élément parent. Ensuite, get; n est un entier , et commence à 1, cela peut aussi être une formule, ou ce peut être les mots-clés pair (nombre pair), impair (impair). number);
:first-of-type, sélectionne le premier élément p de son élément parent, qui a le même effet que p:nth-of -type(1);
:last-of-type, la sélection est le dernier p élément de son élément parent, notez qu'il n'y en a pas de nième devant ;
compte à partir du dernier enfant forward , notez qu'il y a le nième devant
élément enfant de son élément parent, et ce doit être un élément p, c'est selon l'élément parent Calculez l'ordre des sous-éléments à l'intérieur de l'élément n, puis vérifiez si le n-ième sous-élément est p élément Cela provoquera une situation où le n-ième sous-élément peut ne pas être p, et alors ne peut pas être obtenu, il est donc préférable d'utiliser nième-de -type(n);
:first-child, la sélection est son élément parent Le 1er élément de et est un élément p, le même que p : nth-child(1);
compte en avant à partir du dernier sous-élément , note qu'il y en a un nième devant
:first-letter, spécifie le style de la première lettre d'un élément, tous les ponctuations de début doivent avoir ce style appliqué avec la première lettre , et ne peuvent être associées qu'à des éléments de niveau bloc
:first-line, définit le style de la première ligne de texte de l'élément ne peut être associé qu'à des éléments de niveau bloc
:after; IE7 et inférieurs, insérez le contenu généré au début du contenu de l'élément
ne prend en charge que l'écriture à deux points , ne prend en charge que les deux. styles de couleur et de couleur d'arrière-plan
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!