Es gibt mehrere abgeleitete Selektoren in CSS

Es gibt drei Arten von abgeleiteten Selektoren in CSS: 1. Nachkommenselektor, Syntax „E F{Stilcode}“; 2. Untergeordneter Elementselektor, Syntax „E > F {Stilcode}“; Syntax „E + F {Stilcode}“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS-abgeleiteter Selektor (Kontextselektor)

Selektor (Selektor) ist ein sehr wichtiger Teil des CSS-Wissens.

Nach meinem kurzen Verständnis besteht CSS darin, verschiedene Stile auf die Elemente in einem HTML-Code anzuwenden.

Der erste Schritt besteht also darin, das Element, das Sie stylen möchten, genau zu lokalisieren.

CSS verwendet verschiedene Selektoren, um Elemente zu positionieren. Es gibt viele Arten von Selektoren in CSS. Heute möchte ich nur über „abgeleitete Selektoren“ sprechen.

Als ich den Namen „abgeleiteter Selektor“ hörte, konnte ich wirklich nicht verstehen, um was für einen Selektor es sich handelt. Auf den ersten Blick lautet der englische Name „contextual selectors“. Wörtlich übersetzt heißt er „contextual selector“. Obwohl der Name nicht elegant ist, bevorzuge ich diesen Namen.

Der Kontextselektor definiert Stile basierend auf der Kontextbeziehung des Elements an seiner Position.

Es gibt drei Arten von Kontextselektoren: Nachkommenselektoren, Selektoren für untergeordnete Elemente und Selektoren für benachbarte Geschwister. Die Syntaxregel liegt zwischen h1 und em Ein Leerzeichen. Dann wird dieser CSS-Code auf alle im

-Tag enthaltenen Elemente angewendet.

Ein wichtiger Punkt bei Nachkommenselektoren ist, dass die Anzahl der Generationen zwischen dem ersten Parameter und dem zweiten Parameter unendlich sein kann.

eg:

HTML-Code:

    <h1>This is a<em>important</em>heading</h1>

CSS-Code:

    h1 em {color:red;}

Der obige CSS-Stil wird auf die beiden orangefarbenen -Elemente angewendet.

Untergeordneter Selektor (untergeordneter Selektor)

Der untergeordnete Selektor wählt nur die untergeordneten Elemente eines bestimmten Elements aus und wird nicht auf untergeordnete Elemente erweitert.

zB:

HTML-Code:

<ul> 
    <li>
        <ul>
            <li>
                <em>This will be styled.</em>
             </li>
        </ul>
    </li>
    <li>
        <em>This will be styled too.</em>
    </li>
</ul>

CSS-Code:

ul em{color:red;}

Die Syntaxregel besagt, dass zwischen h1 und strong ein „>“-Symbol steht. Das Leerzeichen zwischen diesem „>“ und dem vorhergehenden h1 oder dem folgenden strong ist optional. Im obigen Beispiel ist das -Element ein untergeordnetes Element von

und wird von allen h1 >-Elementen ausgewählt.

In der zweiten Zeile des HTML-Codes ist kein untergeordnetes Element von

, sondern ein Enkel von

, daher wird es vom starken Selektor h1 > nicht ausgewählt.

Angrenzende Geschwisterauswahl

相邻兄弟选择器会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级。 

eg：

HTML代码：

<h1>
    <h2>This is a heading<h2>
    <strong>This will be styled.</strong>
    <strong>This will not be styled.</strong>
<h1>

CSS代码：

h2 + strong {color:red;}

语法规则是h2和strong之间有一个“＋”，“＋”和前面的h1或者后面的strong之间的空格都是可有可无的。

在 以上例子中，第一个strong紧邻着h2并且他们拥有相同的父级(h1)，所以h2 + strong会选择到第一个而不会选到第二个.

eg2:

HTML代码：

<p> 
    <ul>     
        <li>List item 1</li> 
        <li>List item 2</li> 
        <li>List item 3</li> 
    </ul> 
     <ol> 
         <li>List item 1</li> 
         <li>List item 2</li> 
         <li>List item 3</li> 
    </ol> 
</p>

CSS代码：

li + li {color:red;}

在以上的例子中li+li是选择紧挨着li后面的第一个

，所以第一个

不会被选择；而第二个

是紧挨着第一个li的，所有会被选择；第三个

是紧挨着第二个

的，也会被选择。

（学习视频分享：css视频教程）

Das obige ist der detaillierte Inhalt vonEs gibt mehrere abgeleitete Selektoren in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!