Heim > Artikel > Web-Frontend > Ausführliche Erläuterung grundlegender Anwendungsbeispiele des CSS-Nachkommenselektors
Ausführliche Erläuterung grundlegender Anwendungsbeispiele des CSS-Nachkommenselektors
- 高洛峰Original
- 2017-03-07 14:43:392085Durchsuche
Grundlagen
Sehen wir uns die einfachste Möglichkeit an, einen Nachkommenselektor zu schreiben. Das starke Tag gehört zu den Nachkommen des p-Tags und das i-Tag gehört zu Nachkommen des starken Tags:
HTML-Code:
<p>
my name is <strong>li<i>daze</i></strong>, hahah.
</p>
CSS-Code:
p strong {
font-size: 30px;
}
p i {
font-size: 40px;
}
1 Selektor, ein Ende des Selektors auf der linken Seite der Regel enthält zwei Ein oder mehrere durch Leerzeichen getrennte Selektoren.
2. Der Abstand zwischen den Selektoren ist ein verbindendes Symbol.
3. Nachkommenselektor, das hierarchische Intervall der Nachkommen kann unendlich sein, bitte beachten Sie den Unterschied zum untergeordneten Elementselektor.
Beispiel 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>
Ausführungseffekt: 
Beispiel 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>
Ausführungseffekt
Eine kleine Erklärung:
XML/HTML-CodeInhalt in die Zwischenablage kopieren
a:link {color: #FF0000} /* Nicht noch besuchter Link */
a:visited {color: #00FF00} /* Besuchter Link */
a:hover { color: #FF00FF} /* Bewegen Sie die Maus über den Link */
-
a:active {color: #0000FF} /* Ausgewählter Link */
Ausführlichere Beispiele für die grundlegende Verwendung von CSS-Nachkommenselektoren finden Sie auf der chinesischen PHP-Website für verwandte Artikel!