Der Unterschied zwischen a.class und .class, achten Sie auf die Leerzeichen – CSS-Debugging-Tipps

Dieses Problem tritt auf, wenn die Bild-Sprite-Technologie zum Positionieren von Bildern verwendet wird. Manchmal kann ein Leerzeichen viele Probleme verursachen. In diesem Artikel wird der Unterschied zwischen a.class und a.class anhand von Beispielen vorgestellt. (CSS-Video-Tutorial)

Gruppe 1

<a href="#"><span class="ico-manage">管理</span></a>

Verwenden Sie Stil eins:

a:hover{color:black}
a:hover.ico-manage{color:red;}

Zu diesem Zeitpunkt bewegt sich die Maus über das Wort „Management“ und die Farbe ist schwarz

Verwenden Sie Stil 2:

a:hover{color:black}
a:hover .ico-manage{color:red;} //注意空格

Zu diesem Zeitpunkt fährt die Maus über das Wort „Management“ und die Farbe ist rot

Die zweite Gruppe

<a href="#" class="ico-manage">管理</a>

Verwenden Sie Stil eins:

a:hover{color:black}
a:hover.ico-manage{color:red;}

Zu diesem Zeitpunkt fährt die Maus über das Wort „Management“ und die Farbe ist rot

Verwenden Sie Stil zwei:

a:hover{color:black}
a:hover .ico-manage{color:red;} //注意空格

Zu diesem Zeitpunkt fährt die Maus über das Wort „ Management“ und die Farbe ist schwarz

Für die erste Gruppe von a Wenn .ico-manage und .ico-manage zum span-Tag gehören, sind sie nicht auf der gleichen Ebene wie a; und für die zweite Gruppe von a und .ico-manage gehört .ico-manage zum a-Tag, das heißt, sie befinden sich auf der gleichen Ebene wie a, wie in Dies kann zu einer Schlussfolgerung führen:

1 . Wenn die Klasse ein Attribut im aktuellen Tag ist, wird der Stil wie folgt geschrieben: Tag + Klassenname

2 . Wenn die Klasse ein Attribut eines Unter-Tags ist, wird der Stil geschrieben als: Tag+Leerzeichen+Klassenname

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen a.class und .class, achten Sie auf die Leerzeichen – CSS-Debugging-Tipps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!