Próbowałem wycelować w atrybut alt w css. Moje rozwiązanie działało w przeglądarce Firefox / Mozilla, ale nie działa w przeglądarce Safari-Chrome / Webkit. Czy coś jest nie tak ze stylem tagu alt? Jeśli nie, to jak mam rozwiązać problemy z Webkit.
Oto przykład:
CSS
img#logo[alt="Site Title"] { color: #999; font-size: 2em; }HTML
<img id="logo" src="" alt="Site Title" width="" height="" />Odpowiedzi:
Próbowałem i działa idealnie dla mnie. Należy pamiętać, że colori font-sizewłaściwości nie będą miały żadnego wpływu na Chrome, ponieważ tekst nie zostanie wyświetlony. (Firefox wyświetla tekst alternatywny, jeśli nie można znaleźć obrazu.) Na przykład użycie właściwości width pokazuje, że działa poprawnie. Wyślę mój kod poniżej, abyś mógł go zobaczyć.
Jednak w przypadku pierwotnego pytania kierowanie na to, co w zasadzie jest polem „dowolnego tekstu” w CSS, jest podatne na niepowodzenie. Bardzo łatwo jest zmienić atrybut alt, nie myśląc o konsekwencjach w CSS (w przeciwieństwie do zmiany nazwy klasy, gdzie powinno to być oczywiste).
Ponadto, ponieważ już kierujesz reklamy na identyfikator, musisz użyć tylko tego selektora - identyfikatora można użyć tylko raz na stronę.
<!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>Ponieważ selektor atrybutów jest zdefiniowany w specyfikacji W3C CSS, powinieneś być w stanie z niego korzystać. Jednak implementacje przeglądarek różnią się i są mniej lub bardziej niezawodne.
Jak widać na stronie SitePoint Reference dla selektora atrybutów CSS , obsługa Webkit jest błędna. Można również zauważyć, że obsługa selektora atrybutów css w IE różni się w zależności od wersji.
Dlatego ten selektor nie jest jeszcze obsługiwany przez wszystkie przeglądarki.
Jako bardziej niezawodny sposób powinieneś użyć selektora ID, który jest obsługiwany przez wszystkie przeglądarki:
#logo {color: # 999; rozmiar czcionki: 2em; }
Po przeprowadzeniu niektórych testów nie wydaje się, aby za pomocą przeglądarek obsługiwanych przez webkit stylizował tekst atrybutu alt. Więc twoje obserwacje wydają się poprawne i nieuniknione.
Selektor CSS wybiera znacznik, a zatem wpływa na sposób wyświetlania znacznika. Całkiem pewne, jeśli wyłączysz swoje obrazy i spojrzysz na alternatywny tekst wyświetlany w tym miejscu, pojawi się tak, jak jest napisany w twoim css.
Możesz otworzyć błąd w projekcie webkit, aby go naprawić - jeśli czują, że zachowanie firefox jest tym, co chcą tam zrobić.