Ich habe versucht, das alt-Attribut in CSS anzuvisieren. Meine Lösung funktionierte in Firefox / Mozilla, schlägt jedoch in Safari-Chrome / Webkit fehl. Ist etwas falsch daran, ein Alt-Tag zu stylen? Wenn nicht, wie kann ich das Webkit beheben?
Hier ist ein Beispiel:
CSS
img#logo[alt="Site Title"] { color: #999; font-size: 2em; }HTML
<img id="logo" src="" alt="Site Title" width="" height="" />Ich habe es versucht und es funktioniert perfekt für mich. Beachten Sie, dass die Eigenschaften colorund font-sizein Chrome keine Auswirkungen haben, da kein Text angezeigt wird. (Firefox zeigt den Alternativtext an, wenn das Bild nicht gefunden werden kann.) Die Verwendung der Eigenschaft width zeigt beispielsweise, dass es einwandfrei funktioniert. Ich werde meinen Code unten veröffentlichen, damit Sie ihn sehen können.
Bei Ihrer ursprünglichen Frage kann es jedoch zu Missgeschicken kommen, wenn Sie in CSS auf ein Feld mit "freiem Text" abzielen. Es ist sehr einfach, ein alt-Attribut zu ändern, ohne über die Auswirkungen in CSS nachzudenken (im Gegensatz zum Ändern eines Klassennamens, wenn dies offensichtlich sein sollte).
Da Sie bereits auf eine ID abzielen, müssen Sie diesen Selektor nur verwenden - eine ID kann nur einmal pro Seite verwendet werden.
<!DOCTYPE html>
<html>
<head>
<style>img#logo[alt="Site Title"] { width:200px }</style>
</head>
<body>
<img alt="Site Title" src="bullet.png" id="logo" />
</body>
</html>
Da der Attributselektor in der W3C-CSS-Spezifikation definiert ist, sollten Sie ihn verwenden können. Die Implementierungen von Browsern variieren jedoch und sind mehr oder weniger zuverlässig.
Wie Sie in der SitePoint-Referenzunterstützung für die CSS-Attributauswahl sehen können , ist die Unterstützung von Webkit fehlerhaft . Sie können auch feststellen, dass die Unterstützung für die CSS-Attributauswahl im IE von Version zu Version unterschiedlich ist.
Daher wird dieser Selektor noch nicht von allen Browsern unterstützt.
Um zuverlässiger zu sein, sollten Sie den ID-Selektor verwenden, der von allen Browsern unterstützt wird:
quelle
Nach einigen Tests scheint es nicht so zu sein, dass Browser mit Webkit-Unterstützung das Stylen des alt-Attributtextes unterstützen. Ihre Beobachtungen scheinen also richtig und unvermeidlich zu sein.
quelle
Der CSS-Selektor wählt das Tag aus und wirkt sich somit auf die Art und Weise aus, wie das Tag angezeigt wird. Ziemlich sicher, wenn Sie Ihre Bilder ausschalten und sich den alternativen Text ansehen, der an dieser Stelle angezeigt wird, wird er so angezeigt, wie er in Ihrem CSS geschrieben ist.
Möglicherweise möchten Sie einen Fehler für das Webkit-Projekt öffnen, damit sie ihn beheben können - wenn sie der Meinung sind, dass das Verhalten von Firefox das ist, was sie dort tun möchten.
quelle