Я попытался нацелить атрибут alt в css. Мое решение работало в Firefox / Mozilla, но не работает в Safari-Chrome / Webkit. Что-то не так с стилизацией тега alt? Если нет, как вы думаете, я устраняю неполадки для Webkit.
Вот пример:
CSS
img#logo[alt="Site Title"] { color: #999; font-size: 2em; }HTML
<img id="logo" src="" alt="Site Title" width="" height="" />Я попробовал это, и это прекрасно работает для меня. Обратите внимание , что colorи font-sizeсвойства не будет иметь никакого эффекта в Chrome, так как не получает отображается никакого текста. (Firefox отображает альтернативный текст, если изображение не может быть найдено.) Использование свойства width, например, показывает, что оно работает нормально. Я опубликую свой код ниже для вас, чтобы увидеть.
Однако, к вашему первоначальному вопросу, ориентация на то, что по сути является полем «свободного текста» в CSS, может привести к неудаче. Очень легко изменить атрибут alt, не думая о последствиях в CSS (в отличие от изменения имени класса, где это должно быть очевидно).
Кроме того, поскольку вы уже нацеливаетесь на идентификатор, вам нужно использовать только этот селектор - идентификатор можно использовать только один раз на страницу.
<!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>
Поскольку селектор атрибута определен в спецификации CSS W3C, вы можете использовать его. Но реализации браузеров различаются и являются более или менее надежными.
Как вы можете видеть в справочнике SitePoint по поддержке селектора атрибутов CSS , поддержка Webkit содержит ошибки. Вы также можете заметить, что поддержка селектора атрибутов css в IE варьируется от одной версии к другой.
Таким образом, этот селектор поддерживается не всеми браузерами.
В качестве более надежного способа вы должны использовать селектор идентификаторов, который поддерживается всеми браузерами:
источник
После некоторого тестирования кажется, что браузеры с поддержкой webkit не поддерживают стилизацию текста атрибута alt. Таким образом, ваши наблюдения кажутся правильными и неизбежными.
источник
Селектор CSS выбирает тег, таким образом влияет на способ отображения тега. Уверен, если вы выключите свои изображения и посмотрите на альтернативный текст, отображаемый в этом месте, он появится так, как написано в вашем CSS.
Возможно, вы захотите открыть ошибку для проекта webkit, чтобы они могли это исправить - если они чувствуют, что поведение firefox - то, что они хотят делать там.
источник