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:391949Durchsuche

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:
Ausführliche Erläuterung grundlegender Anwendungsbeispiele des CSS-Nachkommenselektors

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

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

Ausführungseffekt
Ausführliche Erläuterung grundlegender Anwendungsbeispiele des CSS-Nachkommenselektors

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!

Stellungnahme：

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

Vorheriger Artikel：Detaillierte Einführung in die Verwendung des CSS-UnterelementselektorsNächster Artikel：Detaillierte Einführung in die Verwendung des CSS-Unterelementselektors

In Verbindung stehende Artikel

Mehr sehen