English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Sélecteur frère universel, la position ne doit pas être adjacente, mais doit être au même niveau, A ~ B sélectionne tous les éléments B de même niveau après l'élément A.
manuel de référence complet du sélecteur CSS
Définir la couleur du texte pour chaque élément span suivant l'élément p dans le même élément parent :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutoriel de base (w3(codebox.com)</title>
<style>
p ~ span {
couleur: rouge;
}
</style>
</head>
<body>
<span>Ce n'est pas rouge.</span>
<p>Voici un paragraphe.</p>
<code>Voici un peu de code.</code>
<span>Et voici un span.</span>
</body>
</html>Voyons voir ‹/›former_element ~ target_element { style properties }élément1~élément2 le sélecteur suivant correspond à l'apparition de l'élément1 l'élément suivant2。
élément1 et élément2 Ces deux éléments doivent avoir le même élément parent, mais élément2 Il n'est pas nécessaire de suivre immédiatement élément1 après l'élément.
IEFirefoxOperaChromeSafari
tous les navigateurs populaires le supportent élément1~élément2 sélecteur
Attention :Pour que IE8 dans les versions antérieures à cette version, il est nécessaire de déclarer <!DOCTYPE>。