Heim > Web-Frontend > CSS-Tutorial > Detaillierte Einführung in die Verwendung des CSS-Unterelementselektors

Detaillierte Einführung in die Verwendung des CSS-Unterelementselektors

高洛峰
Freigeben: 2017-03-07 14:40:54
Original
2494 Leute haben es durchsucht

Der grundlegende Unterelementselektor kann jeweils nur eine Ebene nach unten durchsuchen und nicht kreuzen

HTML-Code:

<p>
    this is my <strong><i>w</i>eb</strong> page.   
</p>
Nach dem Login kopieren

CSS-Code:

p>strong { color: purple; } p>strong>i { font-size: 50px; }
Nach dem Login kopieren

1. Im Vergleich zum Nachkommenselektor kann der untergeordnete Elementselektor nur Elemente auswählen, die untergeordnete Elemente eines Elements sind.

2. Der Unterelementselektor verwendet das Größer-als-Zeichen „>“ als Konnektor.

Beispiel 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>
Nach dem Login kopieren

Detaillierte Einführung in die Verwendung des CSS-Unterelementselektors

Beispiel 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>
Nach dem Login kopieren

Detaillierte Einführung in die Verwendung des CSS-Unterelementselektors

Eine detailliertere Einführung in die Verwendung von CSS-Unterelementselektoren finden Sie auf der chinesischen PHP-Website für verwandte Artikel!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage