Sélecteur descendant (sélecteur CSS)

Explication détaillée du sélecteur descendant CSS

Le sélecteur de destination est utilisé pour correspondre à tous les éléments descendants de l'élément spécifié. Le premier sélecteur simple dans le sélecteur représente l'élément ancêtre - un élément de niveau supérieur dans la structure, comme l'élément parent, l'élément parent de l'élément parent, etc. Le deuxième sélecteur simple représente les éléments descendants que nous essayons de faire correspondre.

Le combiner utilisé dans les sélecteurs descendants est un caractère spatial: espace, onglet horizontal, retour de chariot, pause de ligne ou pause de page. Étant donné que les caractères d'espace sont autorisés autour du combinateur, vous pouvez inclure plusieurs caractères d'espace entre les sélecteurs simples dans les sélecteurs descendants.

Considérons l'extrait HTML suivant:

<code class="language-html"><ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Sub-item 2A</li>
      <li>Sub-item 2B</li>
    </ol>
  </li>
</ul></code>

Nous essaierons de faire correspondre les éléments dans le fragment ci-dessus en utilisant le sélecteur suivant:

<code class="language-css">ul li {
  /* 声明 */
}</code>

Ce sélecteur descendant correspondra aux quatre éléments li dans l'échantillon HTML, car chaque élément li a un élément ul comme ancêtre.

Nous pouvons également utiliser le sélecteur descendant pour correspondre à l'élément ol dans li dans l'exemple ci-dessus:

<code class="language-css">ul * li {
  /* 声明 */
}
ul * * li {
  /* 声明 */
}
ul * ol li {
  /* 声明 */
}
ul li * li {
  /* 声明 */
}
ul ol li {
  /* 声明 */
}
ul li li {
  /* 声明 */
}
ul li ol li {
  /* 声明 */
}</code>

Cependant, nous ne pouvons pas utiliser le sélecteur descendant pour ne correspondre que sur la liste des éléments dans une liste non ordonnée. Pour ce faire, nous avons besoin d'un sous-sélectionneur.

Exemple

Jetons un coup d'œil à un exemple de l'application réelle du sélecteur descendant:

<code class="language-css">ul li {
  /* 声明 */
}</code>

Ce sélecteur correspond à tous les éléments ul qui sont des descendants d'éléments li - c'est-à-dire chaque élément ul avec des éléments li comme ancêtre.

CSS Descendant sélecteur FAQ (FAQ)

Quelle est la différence entre le sélecteur descendant et le sélecteur d'enfants dans CSS?

Dans CSS, les deux sélecteurs descendant et les sous-sélecteurs sont utilisés pour sélectionner des éléments en fonction de leur relation avec d'autres éléments. Cependant, ils fonctionnent différemment. Le sélecteur descendant sélectionne tous les éléments qui sont des descendants de l'élément spécifié. Cela signifie qu'il sélectionne tous les éléments enfants, les éléments de petits-enfants, les éléments arrière-petits-enfants, etc. D'un autre côté, le sous-sélectionneur ne sélectionne que les éléments enfants directs de l'élément spécifié, sans sélectionner aucun descendants plus profonds.

Comment utiliser le sélecteur descendant pour styliser des éléments imbriqués?

Pour styliser des éléments imbriqués à l'aide du sélecteur descendant, vous devez spécifier l'élément ancêtre, suivi d'éléments descendants, séparés par des espaces. Par exemple, si vous souhaitez styliser tous les éléments de paragraphe qui sont issus de l'élément div, vous devriez écrire "div p { /* 您的样式在此处 */ }". Cela appliquera le style à tous les éléments de paragraphe au sein de div, quelle que soit leur profondeur.

Puis-je utiliser plusieurs sélecteurs de descendant en une seule règle?

Oui, vous pouvez utiliser plusieurs sélecteurs de descendant dans une seule règle. Ceci est utile lorsque vous souhaitez styliser des éléments qui sont issus de plusieurs types d'éléments. Par exemple, "div p, ul li { /* 您的样式在此处 */ }" appliquera le style aux éléments de paragraphe dans div et listera les éléments dans une liste non ordonnée.

Quelle est la spécificité du sélecteur de progéniture?

La spécificité de la règle CSS est un indicateur de son importance. Il détermine quelle règle sera appliquée lorsqu'il y aura une règle contradictoire. La spécificité du sélecteur de progéniture est égale à la somme de ses spécificités de sélecteur de composition. Par exemple, la spécificité de "div p" est 2, car elle contient deux sélecteurs de type.

Puis-je utiliser des pseudo-classes avec des sélecteurs descendant?

Oui, vous pouvez utiliser des pseudo-classes avec des sélecteurs descendant. Cela vous permet de sélectionner des éléments en fonction de l'état de l'élément ou où il se trouve dans le document. Par exemple, "div p:first-child { /* 您的样式在此处 */ }" sélectionne le premier élément de paragraphe comme l'élément enfant div.

Comment la cascade affecte-t-elle les sélecteurs descendant?

La castification est un processus par lequel CSS détermine les règles à appliquer aux éléments. Une règle ultérieure ou une règle spécifique plus élevée dans la feuille de style couvrira une règle spécifique antérieure ou inférieure. Cela signifie que si vous avez des règles qui entrent en conflit avec des sélecteurs de progéniture, des règles plus tard ou plus spécifiques seront appliquées.

Puis-je utiliser le sélecteur descendant avec sélecteur d'attribut?

Oui, vous pouvez utiliser des sélecteurs de descendants avec des sélecteurs d'attribut. Cela vous permet de sélectionner des éléments en fonction des attributs de l'élément et de sa position dans le document. Par exemple, "div p[class='highlight'] { /* 您的样式在此处 */ }" sélectionnera un élément de paragraphe avec une classe "surlight" et en tant que descendant de div.

Comment utiliser le sélecteur descendant pour styliser des tables?

Vous pouvez utiliser des sélecteurs descendant pour styliser la table en sélectionnant des lignes de table, des cellules, des titres et d'autres éléments en fonction de la relation entre les éléments de la table et les éléments de la table. Par exemple, "table tr:nth-child(even) { /* 您的样式在此处 */ }" sélectionnera chaque ligne uniforme du tableau.

Puis-je utiliser des sélecteurs descendant avec des sélecteurs universels?

Oui, vous pouvez utiliser des sélecteurs descendant avec des sélecteurs universels. Le sélecteur universel correspond à n'importe quel élément, il peut donc être utilisé pour sélectionner tous les descendants de l'élément spécifié. Par exemple, "div * { /* 您的样式在此处 */ }" sélectionnera tous les éléments qui sont des descendants de div.

Comment coiffer une forme à l'aide du sélecteur descendant?

Vous pouvez utiliser des sélecteurs descendant pour styliser le formulaire en sélectionnant des éléments de formulaire en fonction de la relation entre les éléments de forme et les éléments de la forme. Par exemple, "form input[type='text'] { /* 您的样式在此处 */ }" sélectionnera tous les champs d'entrée de texte dans le formulaire.

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!