CSS에서 alt 속성을 타겟팅하려고했습니다. 내 솔루션은 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텍스트가 표시되지 도착 이후 속성, 크롬에 영향을주지 않습니다. (이미지를 찾을 수없는 경우 Firefox는 대체 텍스트를 표시합니다.) 예를 들어 width 속성을 사용하면 제대로 작동 함을 알 수 있습니다. 아래 코드를 게시하겠습니다.
그러나 원래 질문에 따르면 CSS에서 "자유 텍스트"필드를 대상으로하는 것은 잘못된 일입니다. CSS의 영향에 대해 생각하지 않고 alt 속성을 변경하는 것은 매우 쉽습니다 (클래스 이름을 변경해야하는 것과 달리).
또한 이미 ID를 타겟팅하고 있으므로 해당 선택기를 사용해야합니다. ID는 페이지 당 한 번만 사용할 수 있습니다.
<!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>속성 선택기는 W3C CSS 사양에 정의되어 있으므로 사용할 수 있어야합니다. 그러나 브라우저 구현은 다양하며 다소 안정적입니다.
CSS 속성 선택기에 대한 SitePoint 참조 지원에서 볼 수 있듯이 웹킷의 지원은 버그가 있습니다. 또한 IE의 CSS 속성 선택기 지원 은 버전마다 다릅니다.
따라서이 선택기는 아직 모든 브라우저에서 지원되지는 않습니다.
보다 안정적인 방법으로 모든 브라우저에서 지원되는 ID 선택기를 사용해야합니다.
#logo {색상 : # 999; 글꼴 크기 : 2em; }
일부 테스트를 수행 한 후에는 웹킷 기반 브라우저를 통해 alt 속성 텍스트의 스타일을 지원하는 것처럼 보이지 않습니다. 따라서 당신의 관찰은 정확하고 피할 수없는 것 같습니다.
CSS 선택기가 태그를 선택하므로 태그가 표시되는 방식에 영향을줍니다. 이미지를 끄고 해당 장소에 표시되는 대체 텍스트가 CSS에 기록 된 것처럼 표시되는지 확인하십시오.
그들이 파이어 폭스의 행동이 그들이하고 싶은 행동이라고 생각한다면, 웹킷 프로젝트를 위해 버그를 열어서 고칠 수도 있습니다.