So zielen Sie auf ein Tag mit einem Klassennamen in SCSS [Duplikat]
Nov 19 2020
Ich habe ein HTML-Element wie folgt
<a class="button">Click</a>
In meiner .scss-Datei habe ich den folgenden Code.
.button{
& a{
color:red;
&:hover,
&:visited{
color:blue;
}
}
}
Der obige Code funktioniert nicht.
Ich habe versucht, nach Begriffen wie "Targeting der Geschwisterklasse mit CSS" zu suchen, aber die Ergebnisse zeigen die unten angegebenen Szenarien.
<a>
<span class="button">Click</span>
</a>
Wie ziele ich a
mit der Button-Klasse auf das Tag?
Update:
Ich versuche nicht, auf das übergeordnete Element abzuzielen. Ich muss auf das Element abzielen, für das die jeweilige Klasse verwendet wird.
Antworten
DhruviMakvana Nov 19 2020 at 18:55
Tag - Name durch den Selektor (Klasse oder id) gefolgt Namen a.class_name
, div.class_name
oder a#class_name
,div#class_name
div.button{ /* tag name followed by selector(class or id) name*/)
&>a{ /*will select only direct '<a> tags' inside div.button */
color:red;
&:hover,
&:visited{
color:blue;
}
}
}
div.button{ /* tag name followed by selector(class or id) name*/)
& a{ /*will select only all '<a> tags' inside div.button */
color:red;
&:hover,
&:visited{
color:blue;
}
}
}
div.button{ /* tag name followed by selector(class or id) name*/)
& a.link{ /*will select only '<a> tags with classname link' inside div.button */
color:red;
&:hover,
&:visited{
color:blue;
}
}
}
<div class="button"><a class="link" href=""></a></div>