Que signifie ~ en CSS

L'opérateur ~ dans le "sélecteur de descendant universel" CSS est utilisé pour faire correspondre tous les frères et sœurs suivants d'un élément. La syntaxe est selector1 ~ selector2, ce qui signifie faire correspondre l'élément frère après selector1, et l'élément a le style selector2. Il est couramment utilisé dans des scénarios tels que les styles d'éléments enfants, les menus de navigation et la lisibilité des tableaux.

Signification de ~ en CSS

L'opérateur ~ en CSS, connu sous le nom de « sélecteur de descendant universel », est utilisé pour faire correspondre tous les frères et sœurs suivants d'un élément. Plus précisément :

• Syntaxe : selector1 ~ selector2selector1 ~ selector2
• 含义：匹配所有位于 selector1 后面且具有 selector2

Signification :

Correspond à tous ceux qui se trouvent après selector1 et qui ont le selector2 éléments de style, mais ils doivent être des éléments frères (c'est-à-dire sous le même élément parent).

Exemple :

Le style suivant ajoutera une bordure rouge à tous les éléments de paragraphe situés après un élément portant le nom de classe "box" :

.box ~ p {
  border: 1px solid red;
}

Comment utiliser le sélecteur ~ ?

• ~ Les sélecteurs sont généralement utilisés pour :
• Appliquer des styles d'éléments enfants : Appliquer des styles à des éléments enfants spécifiques d'un élément parent spécifique.
• Créer un menu de navigation : Ajoutez des styles aux éléments du menu de navigation en survol ou à l'état actif.
• Créer des cases à cocher et des boutons radio : Appliquer des styles aux étiquettes des cases à cocher ou des boutons radio.

Améliorez la lisibilité du tableau :

Ajoutez alternativement différentes couleurs ou arrière-plans aux lignes du tableau.

Il convient de noter que :
• ~ Le sélecteur ne peut correspondre qu'aux éléments frères et sœurs suivants, mais pas aux éléments parents ou aux éléments ancêtres.

🎜~ Le sélecteur effectue d'abord une recherche approfondie des éléments dans l'arborescence du document, ce qui signifie qu'il fera d'abord correspondre les éléments enfants, puis les éléments frères. 🎜🎜

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!