Maison > interface Web > tutoriel CSS > le corps du texte

Introduction détaillée à l'utilisation du sélecteur de sous-éléments CSS

高洛峰
Libérer: 2017-03-07 14:40:54
original
2463 Les gens l'ont consulté

Le sélecteur de sous-éléments de base ne peut rechercher que vers le bas, un niveau à la fois et ne peut pas traverser

Code HTML :

<p>
    this is my <strong><i>w</i>eb</strong> page.   
</p>
Copier après la connexion

Code CSS :

p>strong { color: purple; } p>strong>i { font-size: 50px; }
Copier après la connexion

1. Par rapport au sélecteur descendant, le sélecteur d'élément enfant ne peut sélectionner que les éléments qui sont des éléments enfants d'un élément.

2. Le sélecteur de sous-élément utilise le signe supérieur à ">" comme connecteur.

Exemple 1 :

<html>

<head>
    <style type="text/css">
        h1 > strong {   
            color: red;   
        }   
    </style>
</head>

<body>
    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>

</html>
Copier après la connexion

Introduction détaillée à lutilisation du sélecteur de sous-éléments CSS

Exemple 2

<html>

<head>
    <style type="text/css">
        table.company td > p {   
            color: red;   
        }   
    </style>
</head>

<body>
    <table class=&#39;company&#39;>
        <tr>
            <td>
                <p>hello</p>
            </td>
        </tr>
    </table>
    <table>
        <tr>
            <td>
                <p>world</p>
            </td>
        </tr>
    </table>
</body>

</html>
Copier après la connexion

Introduction détaillée à lutilisation du sélecteur de sous-éléments CSS

Pour une introduction plus détaillée à l'utilisation des sélecteurs de sous-éléments CSS, veuillez prêter attention au site Web PHP chinois pour les articles connexes !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal