Was ist ein CSS-Compound-Selektor?

Der zusammengesetzte CSS-Selektor besteht aus zwei oder mehr grundlegenden Selektoren, die auf unterschiedliche Weise kombiniert werden, um genauere und detailliertere Element-Tags auszuwählen.

CSS-Verbindungsselektoren umfassen Unterselektoren, benachbarte Selektoren, enthaltende Selektoren, mehrstufige Selektorverschachtelung, Attributselektoren, Pseudoselektoren und Pseudoelementselektoren,

Die spezifische Verwendung Der Code lautet wie folgt:

1. Unterselektor , der Code lautet wie folgt:

<style type="text/css">
#pic>img{ // 使用 > 号，让选择器只选择直接的子类，width:200px;
height:200px;
}
</style>
<div id="pic">
<img src="1.jpg" alt="photo" />
<span><img src="btn" alt="点击大图" /></span>
</div>

2 >Wenn Sie ein Element unmittelbar nach einem anderen Element auswählen müssen und beide das gleiche übergeordnete Element haben, können Sie den Selektor für angrenzende Geschwister verwenden.

Wenn Sie beispielsweise den oberen Rand des Absatzes vergrößern möchten, der direkt nach dem h1-Element erscheint, können Sie schreiben:

h1 + p {margin-top:50px;}

Dieser Selektor lautet: „Wählen Sie den Absatz aus unmittelbar nach h1 Der Absatz, der nach den Elementen h1 und p erscheint, hat ein gemeinsames übergeordnetes Element.“

3. Der Einschlussselektor

lautet wie folgt:

#header p{font-size:14px}
#main p {font-size:12}

define

das Einschlussfeld Die Schriftgröße des Absatzes beträgt 14 Pixel Definieren Sie

Die Schriftgröße des Absatzes im enthaltenden Feld beträgt 12 Pixel . Mehrstufige Selektorverschachtelung

Der Code lautet wie folgt:

#wrap #header h2 span {font-size:24px}
#wrap #main h2 span {font-size:14px}

5. Attributselektor

Der Selektor für den passenden Attributnamen

div[class] {font-size:24px;}

ermöglicht es dem Selektor, das Objektdefinitionsformat mit dem im div festgelegten Klassenattribut abzugleichen

(2) Passen Sie den Selektor für den Attributwert an

img[alt="图像"][title="图像"] {border：solid 2px red}：

zu Stil definieren

(3) Fuzzy-Matching-Attributwertauswahl

6. Pseudo-Selektoren und Pseudo-Element-Selektoren

<style type ="text/css">
a:link{color:#FF0000} /*正常链接状态下样式*/
a:visited{color:#0000FF} /*被访问之后的样式*/
a:hover{color:#00FF00} /*鼠标经过的样式*/
a:active{color:#FF00FF} /*超链接被激活的样式*/
</style>

Das obige ist der detaillierte Inhalt vonWas ist ein CSS-Compound-Selektor?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!