Ausführliche Erläuterung grundlegender Anwendungsbeispiele des CSS-Nachkommenselektors-CSS-Tutorial-php.cn

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

高洛峰

Freigeben： 2017-03-07 14:43:39

Original

2040 Leute haben es durchsucht

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>

Nach dem Login kopieren

CSS-Code:

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!