Explication détaillée des exemples d'enfant unique et de type unique dans les sélecteurs CSS3

Sélecteur enfant unique

Le sélecteur ":only-child" sélectionne un seul élément enfant dans l'élément parent, et un seul élément enfant. En d'autres termes, l'élément correspondant n'a qu'un seul élément enfant dans son élément parent, et c'est un élément enfant unique .

Exemple de démonstration

Utilisez le sélecteur ":only-child" pour contrôler le style d'arrière-plan d'un seul élément enfant Pour une meilleure compréhension, nous utilisons cet exemple de démonstration. à tout le monde par comparaison.

Code HTML :

<p class="post">
  <p>我是一个段落</p>
  <p>我是一个段落</p></p><p class="post">
  <p>我是一个段落</p></p>

Code CSS :

.post p {
  background: green;
  color: #fff;
  padding: 10px;
}.post p:only-child {
  background: orange;
}

Résultats de la démonstration :

sélecteur de type uniquement

“:only-of-type” A selector est utilisé pour sélectionner un élément qui est le seul élément enfant du même type que son élément parent. Ce n’est peut-être pas facile à comprendre, disons les choses autrement. “:only-of-type” signifie qu'un élément a de nombreux sous-éléments et qu'un seul type de sous-élément est unique. Utilisez le sélecteur ":only-of-type" pour sélectionner le seul sous-élément de ce type.

Exemple de démonstration

Utilisez le sélecteur ":only-of-type" pour modifier la couleur d'arrière-plan d'un seul élément p dans le conteneur en orange.

Code HTML :

<p class="wrapper">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <p>我是一个p元素</p></p><p class="wrapper">
  <p>我是一个p</p>
  <ul>
    <li>我是一个列表项</li>
  </ul>
  <p>我是一个段落</p></p>

Code CSS :

.wrapper > p:only-of-type {
  background: orange;
}

Résultats de la démonstration :

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!