Un examen plus approfondi des sélecteurs en CSS

Cet article vous amènera à comprendre les sélecteurs en CSS, à présenter la syntaxe des sélecteurs simples, des sélecteurs composés, des sélecteurs complexes et des priorités des sélecteurs.

Syntaxe du sélecteur

Comprenons d'abord la syntaxe des sélecteurs, puis examinons de plus près les fonctionnalités associées qui se cachent derrière.

Sélecteur simple

• Étoile —— *
  • Sélecteur universel, vous pouvez sélectionner n'importe quel élément
• Sélecteur de type｜sélecteur de type —— div svg|a
  • est également appelé sélecteur de type, ce qui signifie qu'il sélectionne l'attribut tagName (nom de la balise) dans l'élément
  • tagName est également notre sélecteur le plus couramment utilisé. Mais comme HTML a également des espaces de noms, il en a principalement trois :
  ,
  • , HTMLSVGMathMLSi nous voulons sélectionner des éléments spécifiques en SVG ou MathML, nous devons utiliser une seule barre verticale
  La seule barre verticale dans le sélecteur CSS est un séparateur d'espace de noms, et le nom en HTML Le séparateur d'espace est deux points
  • . Ensuite, l'espace de noms mentionné précédemment doit être déclaré par @namespace. Ils sont utilisés ensemble, mais cet espace de noms n'est pas utilisé très fréquemment. Il n'existe que par souci d'exhaustivité. C'est le seul élément qui se chevauche entre HTML et SVG. |:aOn peut donc penser que le sélecteur de type n'est qu'une simple chaîne de texte
  Sélecteur de classe｜sélecteur de classe——
• Le sélecteur commençant par .class-name est le sélecteur de classe, et c'est aussi l'un des plus classiques
  • Il sélectionnera une classe Nous pouvons également utiliser des espaces comme séparateurs pour spécifier plusieurs classes .
  Ce
  • ne correspondra qu'à une seule. d'entre eux. C'est tout
  • .class
  Sélecteur d'ID
｜sélecteur d'ID——
• Commencez par #id et ajoutez le nom de l'ID pour sélectionner un ID
  • Il s'agit d'une correspondance stricte#
  Vous pouvez ajouter des signes moins ou d'autres symboles dans l'ID
  • Sélecteur d'attribut｜sélecteur d'attribut ——
• Il comprend un sélecteur d'attribut de classe et un sélecteur d'identifiant[attr=value]
  La syntaxe complète de ce sélecteur est
  • , ce qui signifie que le nom de l'attribut est devant et la valeur de l'attribut est à la fin
  • Vous pouvez ajouter attr=value devant le signe égal ici pour signifier comme class , peut supporter une séquence de valeurs séparées par des espaces :
  • ～Si vous ajoutez une seule barre verticale avant le signe égal, cela signifie que cet attribut commence par cette valeur : attr~=value
  • Si nous n'avons pas de spécial exigences de priorité, nous pouvons théoriquement Vous pouvez utiliser des sélecteurs d'attributs pour remplacer les sélecteurs de classe et les sélecteurs d'identifiantattr|=value
  pseudo-classe
——
• À commencer par :hover, c'est principalement le statut particulier de certains attributs
  • Cela n'a rien à voir avec le HTML que nous écrivons, cela vient principalement de l'interaction et des effets:
  Certains sélecteurs de pseudo-classe sont des sélecteurs de pseudo-classe avec des fonctions, ceux-ci Nous pouvons tous utiliser des pseudo-classes pour résoudre le problème
  Sélecteur de pseudo-éléments
——
• De manière générale, cela commence par ::before un double deux-points
  • supporte en fait l'utilisation d'un seul deux-points, mais nous préconisons la méthode d'écriture du double deux-points ::
  car on voit d'un coup d'œil qu'il s'agit d'un pseudo sélecteur d'élément, qui se distingue d'une pseudo classe. Kailai
  • Les pseudo-éléments sont utilisés pour sélectionner certains éléments qui n'existent pas à l'origine
  • Si nous ne les sélectionnons pas, cet élément n'existera pas ici. Après sélection, il y aura un élément de plus
  • .

Sélecteur composé

* Ou le div doit être écrit au début
• Tout d'abord, composé le sélecteur est basé sur plusieurs sélections simples Composé de sélecteurs, tant que les sélecteurs simples sont écrits les uns à côté des autres, il devient un sélecteur composé. Sa sémantique est que l'élément que nous sélectionnons doit correspondre à plusieurs sélecteurs simples en même temps, formant une relation « ET ».

Sélecteur complexe

Un sélecteur composé peut être transformé en sélecteur complexe en utilisant un connecteur au milieu. Un sélecteur complexe sélectionne en fonction de la structure d'un élément.

• —— Sélecteur descendant, un seul élément doit avoir un nœud parent ou un nœud ancêtre à gauche de l'espace
• " ; - Sélecteur parent-enfant, doit être l'élément parent supérieur direct de l'élément
• "~" - Sélecteur de contiguïté
• —— Sélecteur de contiguïté
• "||" ——Les lignes verticales doubles sont le sélecteur de niveau 4 uniquement. Lorsque nous créons un tableau, nous pouvons sélectionner chaque colonne

Sélecteur. priorité

Je suis également entré en contact avec la priorité du sélecteur dans le concept précédent "Apprendre les principes de fonctionnement des navigateurs dans un combat réel". Nous examinons ici plus en profondeur le concept de priorité du sélecteur.

Comptage de sélecteurs simples

On part d'un cas, la priorité du sélecteur est de compter tous les sélecteurs simples contenus dans un sélecteur. Ainsi, la liste de sélecteurs n'est pas considérée comme un sélecteur complet (c'est-à-dire des sélecteurs séparés par des virgules), car le milieu de la liste de sélecteurs est constitué de sélecteurs complexes séparés par des virgules pour un comptage simple des sélecteurs.

Exemple : #id div.a#id

• Ceci contient deux sélecteurs d'ID, un sélecteur de type et un sélecteur de classe
• Selon le nombre d'un specificity tableau [inline-style个数,ID 选择器个数,class 选择器个数,tagName 选择器个数]
• Le nôtre L'exemple montrera specificity = [0, 2, 1, 1]
• Dans la norme du sélecteur, il y a une description comme celle-ci. Nous utiliserons une base N pour représenter la priorité du sélecteur
• Donc
• Il suffit de prendre un grand N et de calculer ce qui en ressort est la priorité du sélecteur. sélecteur
• Par exemple, nous utilisons N=1000000, alors S=2000001000001, c'est la specificity priorité du sélecteur dans cet exemple

L ike IE L'ancienne version d'IE6, car pour pour sauvegarder La valeur de la mémoire N n'est pas assez grande, donc une valeur de 255 est prise comme N, donc quelque chose de très intéressant se produit. Par exemple, nos 256 classes sont équivalentes à un ID. Plus tard, la plupart de nos navigateurs ont choisi 65536, et pratiquement aucun quota n'a été dépassé. Parce que la norme dit seulement d'utiliser une valeur relativement grande, mais nous devons considérer la question de l'utilisation temporaire de la mémoire, nous prendrons donc un nombre relativement entier en hexadécimal, qui est généralement une puissance entière de 256 (car 256 est exactement un octet ).

Pseudo-classe CSS

La pseudo-classe est en fait un simple sélecteur pour beaucoup de contenu.

Lien/Action

• :any-link —— Peut correspondre à n'importe quel hyperlien
• :link —— Hyperliens qui n'ont pas encore été visités
• :link :visited —— Correspond à tous les hyperliens visités
• :hover —— L'état après que l'utilisateur place la souris sur l'élément, avant qu'il ne puisse ne prend effet que sur les hyperliens, mais maintenant il peut être utilisé dans de nombreux éléments
• :active —— Auparavant, il n'était efficace que sur les hyperliens Après avoir cliqué, le lien actuel prendra effet
• :focus —— C'est là que l'accent est mis sur l'état dans. cet élément est généralement utilisé pour les balises d'entrée. En fait, tout élément pouvant obtenir le focus peut être utilisé
• :target - pour créer un lien vers la cible actuelle, mais pour les balises d'ancrage a. le HASH actuel pointe vers la balise a actuelle, la target pseudo-classe

sera activée Une fois :link ou :visited utilisés, on ne pourra plus changer les attributs autres que la couleur du texte de cet élément. Pourquoi est-il conçu de cette façon ? Parce qu'une fois que nous utilisons des attributs liés à la mise en page, par exemple, si nous augmentons la taille de :visited, cela affectera la planification. De cette façon, nous pouvons utiliser l'API JavaScript pour savoir si le lien a été visité. Mais si nous pouvons savoir si le lien a été visité, nous pouvons alors savoir quels sites Web l’utilisateur a visités, ce qui porte un coup fatal à la sécurité du navigateur. Je voudrais donc rappeler à tout le monde qu’il ne faut pas penser que faire des choses expressives n’a rien à voir avec la sécurité. En fait, la sécurité est une considération globale. CSS peut également provoquer des failles de sécurité.

Arborescence

• :empty —— Cet élément a-t-il des éléments enfants
• :nth-child() —— De quel enfant de l'élément parent s'agit-il
• :nth-last-child() —— Comme nth-child, mais à partir de maintenant, on compte en avant ?
• :first-child :last-child :only-child

:nth-child est une pseudo-classe très complexe, qui prend en charge une syntaxe. Par exemple, vous pouvez écrire impair et pair event ou odd entre parenthèses, ou vous pouvez écrire 4N+1, 3N-1, et ceux-ci correspondront respectivement. . La forme d'un entier. Comme il s'agit d'un sélecteur relativement complexe, nous ne voulons pas y écrire d'expressions trop complexes. Nous l'utilisons uniquement pour traiter des expressions paires et impaires, telles que 1 de plus lorsque tous les 3, 1 de plus que 4, etc.

En fait, ces deux sélecteurs empty, nth-last-child, last-child, only-child détruisent le problème de timing du calcul CSS que nous avons mentionné précédemment dans "Apprentissage des principes du navigateur dans la mise en œuvre". On peut imaginer que lorsqu'on démarre le calcul des étiquettes, on ne sait définitivement pas s'il y a des sous-étiquettes. empty L'impact n'est pas particulièrement important, mais la relation de last-child est en fait assez influente. Par conséquent, la navigation a effectué un traitement spécial lors de leur mise en œuvre. Soit le navigateur ne l'implémente pas particulièrement bien, soit le navigateur nécessite plus de performances pour l'implémenter. Il est donc recommandé d’éviter de les utiliser en grande quantité.

Type logique

•  : pas de pseudo-classe - Les navigateurs grand public ne prennent en charge que les séquences de sélecteurs simples (sélecteurs composés) et nous n'avons aucun moyen d'y écrire une syntaxe de sélecteur complexe
•  : où : a —— Ces deux pseudo-classes logiques très puissantes ont été ajoutées au CSS niveau 4

Voici une suggestion chaleureuse à tout le monde, Je ne vous recommande pas d'écrire le sélecteur trop compliqué, Nous pouvons souvent ajouter plus de classes à résolvez-le. Si notre sélecteur est écrit de manière trop complexe, cela signifie que la structure HTML est dans une certaine mesure déraisonnable. Nous faisons cela non seulement pour éviter des problèmes au projet de navigateur, ni pour les performances, mais aussi pour le bien de notre propre structure de code, nous ne devrions donc pas avoir de sélecteurs trop complexes. Les pseudo-éléments CSS

sont divisés en 4 types

• ::before
• ::after
• ::first-line
• ::first-letter

::before et ::after êtes dedans Insérez un pseudo-élément avant et après le contenu de l'élément. Une fois les attributs avant et après appliqués, un attribut appelé content peut être écrit dans la déclaration (les éléments généraux ne peuvent pas écrire l'attribut content). L'attribut de content est comme un véritable élément DOM. Il peut générer des boîtes et participer à la composition et au rendu ultérieurs. Nous pouvons donc déclarer des attributs comme border, background et ainsi de suite pour lui.

peut être compris comme : Le pseudo élément ajoute un élément inexistant à l'interface.

Les mécanismes de

::first-line et ::first-letter sont différents. Ces deux-là existent réellement dans le contenu. Comme son nom l'indique, ils sélectionnent la « première ligne » et sélectionnent la « première lettre ». Ils ne sont pas un élément inexistant, ils enferment une partie du texte pour que l'on puisse y faire quelques traitements.

avant et après

Dans notre concept, on peut penser que le sélecteur avec le pseudo-élément before ajoutera un élément devant le contenu de l'élément réellement sélectionné. Il suffit de transmettre son contenu. ajoutez-y du contenu textuel. (Ici, nous pouvons également attribuer content: '' au pseudo-élément comme vide) Nous pouvons donc spécifier l'attribut d'affichage pour avant et après de n'importe quelle manière, tout comme différents éléments.

Lorsque nous implémentons certains composants, nous utilisons souvent cette méthode pour ajouter du contenu décoratif à la page d'une manière qui ne pollue pas l'arborescence DOM mais peut réellement créer des effets visuels.

<div>
  <::before/>
  content content content content
  content content content content
  content content content content
  content content content content
  <::after/>
</div>

première lettre et première ligne

first-letter équivalent à avoir un élément qui renferme la première lettre dans le contenu. Ceci first-letter Nous pouvons déclarer divers attributs à volonté, mais nous ne pouvons pas modifier son contenu. Nous aurions tous dû voir l'effet que la première lettre d'un journal sera plus grande puis flottera. En CSS, nous pouvons utiliser le sélecteur de pseudo-élément ::first-letter. L'utiliser pour l'implémenter sera plus stable et le code sera plus élégant que l'utilisation de JavaScript.

<div>
  <::first-letter>c</::first-letter>ontent content content content
  content content content content
  content content content content
  content content content content
</div>

first-line est pour le line après la composition. En fait, cela n'a rien à voir avec le first line dans notre code source. Si nos navigateurs proposent des largeurs de rendu différentes, first-line le nombre d'éléments qu'il enfermera finalement dans les deux environnements sera différent. Ainsi, lorsque nous utilisons ce sélecteur, nous devons l'utiliser en fonction des besoins. Il est très probable que l'effet de rendu sur notre machine de développement et sur la machine de l'utilisateur soit différent !

<div>
  <::first-line>content content content content content</::first-line>
  content content content content
  content content content content
  content content content content
</div>

En fait, les attributs disponibles de ces deux sélecteurs sont également différents :

attributs disponibles de première ligne

• font series
• color series
• background series
• word-spac ing
• espacement des lettres
• décoration du texte
• transformation du texte
• hauteur de la ligne

première lettre Propriétés disponibles

• série de polices
• série de couleurs
• arrière-plan série
• texte-décoration
• transformation du texte
• espacement des lettres
• espacement des mots
• hauteur de la ligne
• float
• alignement vertical
• Série de modèles de boîtes : marge, rembourrage, bordure

Petit exercice

Écrivez une fonction de correspondance. Il accepte deux paramètres, le premier paramètre est une propriété de chaîne de sélection et le deuxième paramètre est un élément HTML. Vous pouvez considérer cet élément tel qu’il doit être dans une arborescence DOM. Utilisez des sélecteurs et des éléments DOM pour déterminer si l'élément actuel peut correspondre à notre sélecteur. (Vous ne pouvez utiliser aucune fonction de navigateur intégrée, utilisez uniquement les API parent et enfants du DOM pour déterminer si un élément peut correspondre à un sélecteur.) Voici un exemple d'appel.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Match Example —— by 三钻</title>
  </head>
  <body>
    <div>
      <b>
        <div class="class classA" id="id">content</div>
      </b>
    </div>
  </body>
  <script language="javascript">
    /**
     * 匹配选择器
     */
    function matchSelectors(selector, element) {
      // 先匹配当前元素是否匹配
      let tagSelector = selector.match(/^[\w]+/gm);
      let idSelectors = selector.match(/(?<=#)([\w\d\-\_]+)/gm);
      let classSelectors = selector.match(/(?<=\.)([\w\d\-\_]+)/gm);

      /**
       * 实现复合选择器，实现支持空格的 Class 选择器
       * --------------------------------
       */
      // 检查 tag name 是否匹配
      if (tagSelector !== null) {
        if (element.tagName.toLowerCase() !== tagSelector[0]) return false;
      }
      // 检测 id 是否匹配
      if (idSelectors !== null) {
        let attr = element.attributes[&#39;id&#39;].value;
        if (attr) {
          for (let selector of idSelectors) {
            if (attr.split(&#39; &#39;).indexOf(selector) === -1) return false;
          }
        }
      }
      // 检测 class 是否匹配
      if (classSelectors !== null) {
        let attr = element.attributes[&#39;class&#39;].value;
        if (attr) {
          for (let selector of classSelectors) {
            if (attr.split(&#39; &#39;).indexOf(selector) === -1) return false;
          }
        }
      }

      return true;
    }

    /**
     * 匹配元素
     */
    function match(selector, element) {
      if (!selector || !element.attributes) return false;

      let selectors = selector.split(&#39; &#39;).reverse();

      if (!matchSelectors(selectors[0], element)) return false;

      let curElement = element;
      let matched = 1;

      // 递归寻找父级元素匹配
      while (curElement.parentElement !== null && matched < selectors.length) {
        curElement = curElement.parentElement;
        if (matchSelectors(selectors[matched], curElement)) matched++;
      }

      // 所有选择器匹配上为 匹配成功，否则是失败
      if (matched !== selectors.length) return false;

      return true;
    }

    let matchResult = match(&#39;div #id.class&#39;, document.getElementById(&#39;id&#39;));
    console.log(&#39;Match example by 三钻&#39;);
    console.log(&#39;matchResult&#39;, matchResult);
  </script>
</html>

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!