suchen

Heim >Web-Frontend >CSS-Tutorial >CSS-Nachkommenselektor

CSS-Nachkommenselektor

php中世界最好的语言
php中世界最好的语言Original
2018-03-20 15:22:023836Durchsuche

Dieses Mal bringe ich Ihnen den CSS-Nachkommenselektor. Was sind die Vorsichtsmaßnahmen bei der Verwendung des CSS-Nachkommenselektors?

Der Nachkommen-Selektor wird verwendet, um alle Nachkommen eines Tags auszuwählen, einschließlich untergeordneter und untergeordneter Elemente usw., während der Nachkommen-Selektor nur die Nachkommen-Tags des angegebenen Eltern-Tags (die untergeordneten Elemente der ersten Generation des angegebenen Tags) auswählt Element).

Der Nachkommenselektor verwendet ein zusätzliches Symbol (spitze Klammern >), um die Beziehung zwischen zwei Elementen anzuzeigen.

Zum Beispiel: body>h1 wählt alle

-Tags der ersten Generation aus.

Beziehungsdiagramm des HTML-Tags

HTML-Code

<h1>body里面的h1标题</h1>
<p>
    <h2>p里面的h2</h2>
    <p>
        p里面的p标签，p标签里面有一个<strong><a href="#">加粗的链接</a></strong>
    </p>
</p>
<h2>body里面的h2标题</h2>
<ul>
    <li>列表1
        <ul>
            <li>小列表a</li>
            <li>小列表b</li>
            <li>小列表c</li>
        </ul>
    </li>
    <li>
        <a href="#">列表2（带链接）</a>
    </li>
    <li>
        <a href="#">列表3（带链接）</a>
    </li>
</ul>

Nachdem Sie die obige Struktur verstanden haben, können Sie den folgenden Code ausprobieren:

CSS-Code

body>h2 {
    color: orange;
}

Im obigen HTML-Code Insgesamt gibt es 2

-Tags, aber hat nur einen Nachkommen von

und der andere

befindet sich innerhalb von

, daher gilt der obige CSS-Code nur für erstes

-Tag.

Das Folgende ist eine interessantere Kinderauswahl

: erstes Kind

Wählen Sie den ersten Untertag aus.

CSS-Code

h2:first-child {
    color: orange;
}

Die Funktion dieses Selektors ist: Zuerst alle

-Tags auf der Webseite finden und die

-Tags übergeben ;h2>-Tag Suchen Sie sein übergeordnetes Element und bestimmen Sie dann, ob das

-Tag in seinem übergeordneten Element an erster Stelle steht.

Da das erste Tag von ist, wird das untergeordnete Element

nicht vom Stil beeinflusst.

Da

das erste untergeordnete Element von

ist, wird

:last-child

Dieser Selektor ähnelt dem :first-child-Selektor, wählt jedoch das letzte untergeordnete Element eines Elements aus.

CSS-Code

li:last-child {
    font-size: 2em;
}

Wie Sie sehen können, haben die Schriftgrößen von „Kleine Liste C“ und „Liste 3 (mit Link)“ die gleichen größer werden. Denn diese beiden Elemente sind die letzten angegebenen Elemente.

:only-child

Wählen Sie das einzige untergeordnete Element eines Elements aus.

HTML-Code

<p>
    <p>第一个p的p</p>
</p>
<p>
    <p>第二个p的第一个p</p>
    <a href="#">第二个p的第一个a</a>
</p>

CSS-Code

p:only-child {
    color: orange;
}

Der obige Stil gilt nur für das erste

;p>Element. Da das zweite

-Element nicht nur

enthält, wird das

-Element vom obigen Stil nicht beeinflusst.

Dieser Selektor ist schwer zu verstehen. Der durch diesen Selektor definierte Stil ist nur wirksam, wenn das angegebene Tag der einzige Nachkomme eines anderen Tags ist. Mit anderen Worten: Es reicht nicht aus, wenn im Nachkommen nur ein angegebenes Tag vorhanden ist. Wenn das angegebene Tag andere Geschwister-Tags hat, ist der von diesem Selektor definierte Stil ungültig.

:nth-child

Dieser Selektor ist komplizierter zu verwenden, aber auch besonders nützlich.

Mit diesem Selektor können Sie problemlos Stile für Zeilen in einer Tabelle, zwei Elemente voneinander entfernte Elemente in einer Liste oder eine andere Anzahl von untergeordneten Elementen definieren.

Dieser Selektor erfordert einen Wert, um zu bestimmen, welche Nachkommen ausgewählt werden.

Die einfachsten Werte sind Schlüsselwörter, nämlich ungerade und gerade.

  1. odd用于选取奇数子代元素。

  2. even用于选取偶数子代元素。

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

CSS代码

li:nth-child(odd) {
    background: pink;
}
li:nth-child(even) {
    background: teal;
}

第一个子元素的下标是 1。

需要注意的是，如果在第一个

  • 之前还有其他元素，那第一个
  • 的下标就不是1了。
    比如

    HTML代码

    <ul>
    <a href="#">a</a>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

    这时的效果是

    li:nth-child(odd) 的意思是找到

  • 元素的父元素，通过父元素来检测每一个
  • 的下标的奇偶。

    因为

    • 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：Implementieren Sie Cornell Notes mit HTML und CSSNächster Artikel：Implementieren Sie Cornell Notes mit HTML und CSS

    In Verbindung stehende Artikel

    Mehr sehen