Qu'est-ce que le sélecteur supérieur à (>) en CSS ?-tutoriel CSS-php.cn

Qu'est-ce que le sélecteur supérieur à (>) en CSS ?

王林

Libérer： 2023-08-29 12:09:02

avant

1083 Les gens l'ont consulté

CSS 中的大于号 (>) Qu'est-ce qu'un sélecteur ?

En CSS, le symbole ">" n'est pas utilisé pour comparer deux valeurs comme dans d'autres langages de programmation. Ici, nous utilisons le signe supérieur à (>) comme sélecteur.

En CSS, les sélecteurs sont utilisés pour sélectionner un ou plusieurs éléments HTML. Chaque fois que nous utilisons le signe supérieur à dans un sélecteur, il sélectionnera les éléments enfants directs de l'élément parent, mais pas les éléments enfants profondément imbriqués.

Grammaire

Les utilisateurs peuvent utiliser le signe supérieur à dans les sélecteurs CSS selon la syntaxe suivante.

selecter1>selector2 {
   /* CSS code */
}

Copier après la connexion

Dans la syntaxe ci-dessus, "selector1" est l'élément parent et "selector2" est l'élément enfant direct. Par conséquent, nous définissons les styles des éléments enfants dans le bloc de déclaration.

Exemple 1

Dans l'exemple ci-dessous, nous créons une liste ordonnée d'éléments HTML. En CSS, nous utilisons le sélecteur "ol>li", ce qui signifie sélectionner tous les éléments HTML "ol" qui sont des enfants directs de l'élément "li".

Dans le résultat, l'utilisateur peut observer que tous les éléments de la liste deviennent bleus puisque tous les « li » sont des enfants directs de « ol ».

<html>
<head>
   <style>
      ol>li {
         color: blue;
      }
   </style>
</head>
<body>
   <h3>Using the <i> (>) CSS selector </i> to select direct child elements in CSS</h3>
   <ol>
      <li> HTML </li>
      <li> CSS </li>
      <li> JavaScript </li>
      <li> NodeJS </li>
   </ol>
</body>
</html>

Copier après la connexion

Exemple 2

Dans l'exemple ci-dessous, nous avons un élément div qui contient des éléments "p" à différents niveaux. À l'intérieur de l'élément div, nous avons ajouté l'élément "ht4" et l'élément "p". Par conséquent, nous avons ajouté des éléments « p » aux deuxième et troisième niveaux de profondeur.

En CSS, nous utilisons le sélecteur CSS « div>p » pour sélectionner tous les éléments « p » directs d'un élément div. De plus, nous avons utilisé le sélecteur CSS « div p », qui sélectionne tous les éléments « p » dans un élément div.

Dans la sortie, l'utilisateur peut observer que "color: red" n'est appliqué qu'au premier élément "p" puisqu'il est le seul enfant direct de l'élément div. Lorsque le sélecteur CSS "div p" sélectionne des éléments enfants de tous les niveaux, "background-color: aqua" sera appliqué à tous les éléments "p".

<html>
<head>
   <style>
      div>p {
         color: red;
      }
      div p {
         background-color: aqua;
      }
   </style>
</head>
<body>
   <h3>Using the <i> (>) CSS selector </i> to select direct child elements in CSS</h3>
   <div>
      <p> This paragraph is at the first level. </p>
      <h3>
         <p> This paragraph is at the second level. </p>
         <h4>
            <p> This paragraph is at the third level. </p>
         </h4>
      </h3>
   </div>
</body>
</html>

Copier après la connexion

Exemple 3

Dans l'exemple ci-dessous, nous utilisons le signe supérieur à pour sélectionner des éléments HTML à partir de niveaux profondément imbriqués. Ici, l'élément HTML "conteneur" contient la liste non ordonnée, et nous avons également créé la liste non ordonnée en dehors de l'élément "conteneur".

En CSS, nous utilisons le sélecteur CSS '.container>ul>li' pour sélectionner tous les éléments 'li' qui sont des enfants directs de l'élément 'ul', ici l'élément 'ul' doit être un enfant direct de l'élément 'ul' Element An élément avec un nom de classe "conteneur".

Dans le résultat, nous pouvons voir que tous les CSS ne sont appliqués qu'aux listes imbriquées.

<html>
<head>
   <style>
      .container>ul>li {
         color: red;
         padding: 3px;
         background-color: green;
         font-size: 1.3rem;
      }
   </style>
</head>
<body>
   <h3>Using the <i> (>) CSS selector </i> to select direct child elements in CSS</h3>
   <div class = "container">
      <ul>
         <li> one </li>
         <li> Two </li>
         <li> Three </li>
      </ul>
   </div>
   <ul>
      <li> Four </li>
      <li> Five </li>
      <li> Six </li>
   </ul>
</body>
</html>

Copier après la connexion

L'utilisateur a appris à utiliser le sélecteur CSS de signe supérieur à (>) en CSS. Il est utilisé pour sélectionner les éléments enfants directs d’un élément spécifique. Ici, nous pouvons utiliser des balises HTML, des noms de classe, des identifiants, etc. Sélecteur CSS avec un signe supérieur à (>).

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!