Was ist ein CSS-Compound-Selektor?-CSS-Tutorial-php.cn

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>

Nach dem Login kopieren

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;}

Nach dem Login kopieren

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}

Nach dem Login kopieren

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}

Nach dem Login kopieren

5. Attributselektor

Der Selektor für den passenden Attributnamen

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

Nach dem Login kopieren

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}：

Nach dem Login kopieren

zu Was ist ein CSS-Compound-Selektor? 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>

Nach dem Login kopieren

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!

Verwandte Etiketten：

css复合选择器

Quelle：php.cn

Vorheriger Artikel：Was ist das Box-Modell in CSS? Nächster Artikel：Was ist die Darstellung des Klassenselektors in CSS?

Erklärung dieser Website

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

Neueste Artikel des Autors