Wie kann ich Links selektiv unterstreichen und gleichzeitig bestimmte Span-Elemente ausschließen?

Links und Span-Elemente für deutliche Unterstreichung formatieren

Bei der Arbeit mit HTML und CSS ist es im Hinblick auf die Textdekoration oft erforderlich, Links und Span-Elemente anders zu gestalten. In manchen Fällen möchten Sie möglicherweise die Unterstreichung von einem bestimmten Span-Element innerhalb eines Links entfernen. Dies kann jedoch bei Verwendung herkömmlicher CSS-Selektoren eine Herausforderung darstellen.

Die vorliegende Frage zielt darauf ab, dies zu erreichen, wobei der Link bis auf ein Element mit der ID „#myspan“ unterstrichen werden sollte. Zunächst scheinen die bereitgestellten CSS-Regeln keine Auswirkung auf „#myspan“ zu haben, aber das Problem entsteht, wenn die Reihenfolge der Formatierung umgekehrt wird und „#myspan“ unterstrichen wird, aber nicht der Link.

Lösung: Inline-Styling

Um dieses Problem zu beheben, ist eine einfache CSS-Änderung erforderlich. Indem Sie das Element zum Inline-Block machen, wird es vom Unterstreichungseffekt des Links isoliert:

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  display: inline-block;
}

a:active #myspan {
  color: grey;
}

a:visited #myspan {
  color: yellow;
}

a:hover #myspan {
  color: red;
}

Dieser CSS-Code stellt sicher, dass der Link unterstrichen ist, während das „#myspan“-Element unterstrichen bleibt. Zusätzlich kann die Farbe von „#myspan“ mit den CSS-Regeln nach Wunsch angepasst werden.

Das obige ist der detaillierte Inhalt vonWie kann ich Links selektiv unterstreichen und gleichzeitig bestimmte Span-Elemente ausschließen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!