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 amit 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_nameoder 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>