Maison > Article > interface Web > Explication détaillée des exemples d'utilisation de base du sélecteur de descendant CSS
Explication détaillée des exemples d'utilisation de base du sélecteur de descendant CSS
- 高洛峰original
- 2017-03-07 14:43:392083parcourir
Bases
Regardons la manière la plus simple d'écrire un sélecteur de descendants. La balise strong appartient aux descendants de la balise p et la balise i appartient à la balise p. descendants de la balise forte :
Code HTML :
<p>
my name is <strong>li<i>daze</i></strong>, hahah.
</p>
Code CSS :
p strong {
font-size: 30px;
}
p i {
font-size: 40px;
}
1. sélecteur, une extrémité du sélecteur sur le côté gauche de la règle comprend deux Un ou plusieurs sélecteurs séparés par des espaces.
2. L'espace entre les sélecteurs est un symbole de combinaison.
3. Sélecteur de descendants, l'intervalle hiérarchique des descendants peut être illimité, veuillez noter la différence avec le sélecteur d'élément enfant.
Exemple 1
<html>
<head>
<style type="text/css">
ul em {color:red; font-weight:bold;}
</style>
</head>
<body>
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
Effet d'exécution : 
Exemple 2
<html>
<head>
<style type="text/css">
p.sidebar {width:100px;height:100px;background:blue;}
p.maincontent {width:100px;height:100px;background:yellow;}
p.sidebar a:link {color:white;}
p.maincontent a:link {color:red;}
</style>
</head>
<body>
<p class='sidebar'>
<a href ='#'>我是链接1<a/>
</p>
<p class='maincontent'>
<a href ='#'>我是链接1<a/>
</p>
</body>
</html>
Effet d'exécution
Une petite explication :
Code XML/HTMLCopier le contenu dans le presse-papiers
a:link {color: #FF0000} /* Non encore Lien visité */
a:visited {color: #00FF00} /* Lien visité */
a:hover { color: #FF00FF} /* Déplacez la souris sur le lien */
-
a:active {color: #0000FF} /* Lien sélectionné */
Pour des exemples d'utilisation de base plus détaillés des sélecteurs descendants CSS, veuillez prêter attention au site Web PHP chinois pour les articles connexes !