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 !

Poids du sélecteur

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

• est de 10 ; le poids du style

  en ligne (JS

  fonctionne également avec le style en ligne) est de 1000.

• Bien sûr si une certaine valeur d'

  attribut
est définie ! important, c'est toujours le plus important, tuez directement

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

Sélecteur d'élément, html{...}, body{...}, p{...}, l'élément du document est le sélecteur le plus basique, sélecteur d'élément ;
sélecteur d'identifiant, #value, définissez un attribut d'identifiant sur l'élément, la valeur est valeur
sélecteur de classe de classe, .value {...}, définissez un attribut de classe sur l'élément, la valeur est la valeur
• Sélecteur d'attribut

  , 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électeur d'attribut spécifique : input[type="button"], récupère l'élément d'entrée du bouton de valeur d'attribut ; outter= "abc"], récupère l'élément dont l'identifiant est wrapper et la valeur de l'attribut external est abc;
2. sélecteur d'attribut partiel : p[class ^="a" ], get L'élément p dont la valeur d'attribut de classe commence par a; p[class $="b"], obtient l'élément p dont la valeur d'attribut de classe se termine par b; Sélecteur >

Group
3. , séparez les sélecteurs à regrouper par des virgules ; #wrapper, #content{...}, récupérez l'élément avec l'identifiant du wrapper et l'élément avec l'identifiant de contenu, deux Get all;

Sélecteur descendant

, séparez les sélecteurs à regrouper par des espaces, #wrapper #content{...}, dans l'élément avec l'identifiant du wrapper À l'intérieur de l'objet

• , récupérez l'élément avec l'identifiant du contenu

  peut être un élément enfant ou un élément descendant

<.>
• Sélecteur d'élément enfant

  , 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 :

  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ère
adjacent n'obtient que l'élément actuel puis l'élément
• qui suit

  Même s'il y a le même élément plus tard, il ne peut pas l'être. sélectionné ;

1. Sélecteur universel de frères et sœurs (non pris en charge par IE7 et versions antérieures), séparez les sélecteurs à regrouper avec des tildes, .wrapper ~ .content{...}, obtenez class Après avoir été un élément wrapper,

   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) :

1. :root sélectionne l'élément racine du document, c'est-à-dire l'élément html

2. input:focus, la zone de saisie actuelle obtient le focus

   ;

3. élément:hover, la souris survole l'élément actuel

4. 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);

5. p

   :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);

6. p

   :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 ;

7. p:nth-last -of-type(n), la sélection est le nième élément p de son élément parent, mais

   compte à partir du dernier enfant forward , notez qu'il y a le nième devant

8. p:nth-child(n), la sélection est le nième

   é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);

9. p

   :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);

10. p:last-child, sélectionne le dernier élément de son élément parent, Et c'est un élément p

11. p:nth-last-child(n), la sélection est le nième élément enfant de son élément parent, et ce doit être un p élément, mais

    compte en avant à partir du dernier sous-élément , note qu'il y en a un nième devant

12. Il y en a bien d'autres...

• Sélecteur de pseudo-éléments :

1. :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

2. :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

3. :after; IE7 et inférieurs, insérez le contenu généré au début du contenu de l'élément

4. :before, non pris en charge par IE7 et inférieurs, au début de l'élément ; content Enfin, insérez le contenu généré ;

5. ::selection, correspond à la partie sélectionnée par l'utilisateur ;

   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!