Tôi đã thử nhắm mục tiêu thuộc tính alt trong css. Giải pháp của tôi đã hoạt động trong Firefox / Mozilla, nhưng không thành công trong Safari-Chrome / Webkit. Có bất cứ điều gì sai với phong cách một thẻ alt? Nếu không, làm thế nào để bạn cho rằng tôi khắc phục sự cố cho Webkit.
Đây là một ví dụ:
CSS
img#logo[alt="Site Title"] { color: #999; font-size: 2em; }HTML
<img id="logo" src="" alt="Site Title" width="" height="" />Câu trả lời:
Tôi đã thử nó và nó hoạt động hoàn hảo cho tôi. Lưu ý rằng các thuộc tính colorvà font-sizesẽ không có bất kỳ ảnh hưởng nào trong Chrome, vì không có văn bản nào được hiển thị. (Firefox hiển thị văn bản thay thế nếu không thể tìm thấy hình ảnh.) Ví dụ, sử dụng thuộc tính width cho thấy nó hoạt động tốt. Tôi sẽ đăng mã của tôi dưới đây để bạn xem.
Tuy nhiên, đối với câu hỏi ban đầu của bạn, việc nhắm mục tiêu thực chất là trường "văn bản miễn phí" trong CSS có xu hướng bị rủi ro. Thật dễ dàng để thay đổi một thuộc tính alt mà không cần suy nghĩ về hậu quả trong CSS (trái ngược với việc thay đổi tên lớp trong đó rõ ràng).
Hơn nữa, vì bạn đã nhắm mục tiêu ID, bạn chỉ cần sử dụng bộ chọn đó - ID chỉ có thể được sử dụng một lần trên mỗi trang.
<!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>Vì bộ chọn thuộc tính được xác định trong thông số CSS W3C, bạn sẽ có thể sử dụng nó. Nhưng các trình duyệt triển khai khác nhau, và ít nhiều đáng tin cậy.
Như bạn có thể thấy trên hỗ trợ Tham chiếu SitePoint cho bộ chọn thuộc tính CSS , hỗ trợ của Webkit là lỗi. Bạn cũng có thể thấy rằng hỗ trợ bộ chọn thuộc tính css của IE thay đổi từ phiên bản này sang phiên bản khác.
Do đó, bộ chọn này chưa được hỗ trợ bởi tất cả các trình duyệt.
Là một cách đáng tin cậy hơn, bạn nên sử dụng bộ chọn ID, được tất cả các trình duyệt hỗ trợ:
#logo {màu: # 999; cỡ chữ: 2em; }
Sau khi thực hiện một số thử nghiệm, có vẻ như thông qua các trình duyệt hỗ trợ webkit hỗ trợ tạo kiểu văn bản thuộc tính alt. Vì vậy, quan sát của bạn dường như là chính xác và không thể tránh khỏi.
Bộ chọn CSS đang chọn thẻ, do đó ảnh hưởng đến cách hiển thị thẻ. Khá chắc chắn nếu bạn tắt hình ảnh của bạn và nhìn vào văn bản thay thế được hiển thị ở nơi đó sẽ hiển thị khi nó được viết trong css của bạn.
Bạn có thể muốn mở một lỗi cho dự án webkit để họ sửa nó - nếu họ cảm thấy rằng hành vi của firefox là điều họ muốn làm ở đó.