Explication détaillée des exemples d'utilisation de base du sélecteur de descendant CSS-tutoriel CSS-php.cn

Explication détaillée des exemples d'utilisation de base du sélecteur de descendant CSS

高洛峰

Libérer： 2017-03-07 14:43:39

original

2082 Les gens l'ont consulté

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>

Copier après la connexion

Code CSS :

p strong {   
    font-size: 30px;   
}   
p i {   
    font-size: 40px;   
}

Copier après la connexion

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>

Copier après la connexion

Effet d'exécution :
Explication détaillée des exemples dutilisation de base du sélecteur de descendant CSS

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=&#39;sidebar&#39;>
<a href =&#39;#&#39;>我是链接1<a/>
</p>

<p class=&#39;maincontent&#39;>
<a href =&#39;#&#39;>我是链接1<a/>
</p>
</body>
</html>

Copier après la connexion

Effet d'exécution
Explication détaillée des exemples dutilisation de base du sélecteur de descendant CSS

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 !