Sélecteurs de combinaison CSS

Sélecteur combiné

Le sélecteur de balise, le sélecteur de classe et le sélecteur d'ID peuvent être utilisés en combinaison. La méthode de combinaison générale est la combinaison du sélecteur de balise et du sélecteur de classe, ainsi que la combinaison du sélecteur de balise et du sélecteur d'ID. Puisque les principes et les effets de ces deux méthodes de combinaison sont les mêmes, seule la combinaison du sélecteur de balises et du sélecteur de classe est introduite. Le sélecteur de combinaison n'est qu'une forme de combinaison et non un véritable sélecteur, mais il est souvent utilisé dans la pratique.

Par exemple .orderlist li {xxxx} ou .tableset td {}

Lorsque nous l'utilisons, nous l'utilisons généralement dans certaines balises qui apparaissent à plusieurs reprises et ont le même style, comme li td dd etc.

Par exemple<h1 class="red"></h1> H1.red {couleur : rouge}

Liste de sélection combinée

1 A,B Sélection d'éléments multiples , correspond à tous les éléments A et B en même temps, séparés par des virgules entre A et B div,p { color:red; }

2 A B Sélecteur d'élément descendant, correspond à tous les descendants. éléments appartenant aux éléments B descendants de l'élément A, séparés par des espaces entre A et B #nav li { display:inline; li a { font-weight:bold; >3. A > B Sélecteur d'élément enfant, correspond à tous les éléments enfants B de A élément div > strong { color:#f00; }

4. , correspond à tous L'élément frère B immédiatement après l'élément A p + p { color:>

5 A ~ B Sélecteur d'élément adjacent ordinaire, correspondant à tous les éléments adjacents de l'élément spécifié. div ~ p { color:#f00;

<style>

{padding:10px;background-color:#ffffff;border:1px #000000 solid;color:red;}

</style>

//code html

<div class="mydivred">;

<p class="mypred"> p.mypred</p>

Essayez-le

Sélecteur d'éléments descendants

<style>

#fuji .ziji

{

rembourrage :10px;

couleur de fond : #ffffff;

bordure :1px # 000000 uni;couleur:rouge;

}

</style> 🎜>

<div id="fuji">