Bộ chọn thuộc tính CSS3 Nhắm mục tiêu Loại tệp
Các bộ chọn thuộc tính là một tính năng thực sự hữu ích để chọn một yếu tố mà không cần thêm ID hoặc là các lớp học. Miễn là phần tử được nhắm mục tiêu có thuộc tính như href, src và kiểu chúng ta không phải làm như vậy.
Các bộ chọn thuộc tính thực sự đã có xung quanh kể từ CSS 2.1, và bây giờ với một vài loại bộ chọn thuộc tính được thêm vào trong thông số kỹ thuật CSS3, chúng tôi có thể nhắm mục tiêu thuộc tính của phần tử cụ thể hơn nữa.
Và, trong bài đăng này, chúng tôi sẽ sử dụng một trong các cú pháp để chọn loại tệp được chèn vào như một phần của giá trị thuộc tính.
Cú pháp và Hỗ trợ Trình duyệt
Các loại tệp luôn ở cuối tên tập tin Vì vậy, để chọn rằng loại tệp chúng ta có thể sử dụng cú pháp sau [attr $ = "giá trị"]. Cú pháp này sử dụng $ = toán tử sẽ nhắm mục tiêu kết thúc giá trị thuộc tính, ví dụ:
a [href $ = ". pdf"]: trước nền: url ('Thẻ /images/document-pdf-text.png') không lặp lại; Đoạn mã trên sẽ chọn mọi liên kết mà giá trị thuộc tính kết thúc bằng .pdf và chèn một biểu tượng tài liệu từ trong :trước yếu tố giả.
Nguồn biểu tượng PDF: Biểu tượng Fugue
Mặc dù đây là cách sử dụng phổ biến của bộ chọn này, chúng tôi chắc chắn có thể vượt xa hơn.
Về khả năng tương thích trình duyệt; Mặc dù cú pháp này được giới thiệu chính thức là đặc tả CSS3, nhưng nó thực sự đã được hỗ trợ từ Internet Explorer 7, vì vậy bạn có thể áp dụng nó một cách an toàn thông qua tất cả các thiết kế của bạn.
Ví dụ
Bạn sẽ không bao giờ biết, nếu bạn không bao giờ thử. Chúng ta chỉ cần thử một cái gì đó mới để hiểu rõ hơn về thứ mà chúng ta chưa hiểu. Vì vậy, ở đây, chúng tôi sẽ chứng minh làm thế nào cú pháp này có thể rất hữu ích và tiện dụng để nhắm mục tiêu một yếu tố trong cấu trúc HTML cụ thể, vốn hơi khó áp dụng khi chỉ sử dụng CSS đơn giản.
Dưới đây, chúng tôi có một Cấu trúc HTML5 để liệt kê ba hình ảnh với chú thích của nó. Chỉ dành cho mục đích trình diễn, đánh dấu của bạn không nhất thiết phải giống như đoạn trích sau (ví dụ: bạn có thể chỉ có một hình ảnh hoặc thậm chí ba hình ảnh nữa), nhưng vấn đề là bạn có thể biết cách áp dụng cú pháp này trong một cấu trúc HTML cụ thể.
-
jpg -
png -
gif
Mỗi hình ảnh được liệt kê ở trên có các định dạng hoặc phần mở rộng sau đây, jpg, png, và gif. Họ cũng có một chú thích đại diện cho phần mở rộng hình ảnh của nó; chú thích này sau đó sẽ hoạt động như nhãn hình ảnh.
Vì vậy, đây là kế hoạch, chúng tôi sẽ đưa ra các màu nền khác nhau cho chú thích cho mỗi phần mở rộng hình ảnh khác nhau. Hình ảnh JPG sẽ nhận được một màu xanh lá chú thích màu, PNG sẽ nhận được màu xanh da trời, và cuối cùng gif sẽ nhận được màu tím.
Trước tiên, hãy đặt vị trí của thẻ hình tương đối, bởi vì chúng ta sẽ áp dụng tuyệt đối vị trí cho chú thích.
hình vị trí: tương đối;
Thêm một chút trang trí cho hình ảnh với đường viền và bóng.
img viền: 5px solid #ccc; -webkit-box-bóng: 1px 1px 3px 0px rgba (0, 0, 0, .5); hộp bóng: 1px 1px 3px 0px rgba (0, 0, 0, .5);
Và sau đó, chúng tôi đặt kiểu và định vị mặc định cho chú thích. Chú thích hình ảnh hoặc nhãn sẽ có hình vuông 50px.
img + figcaption màu: #fff; vị trí: tuyệt đối; đầu trang: 0; phải: 0; chiều rộng: 50px; chiều cao: 50px; chiều cao dòng: 50px; văn bản-align: trung tâm;
Bây giờ là lúc để thêm màu nền. Để làm như vậy, chúng ta có thể kết hợp bộ chọn thuộc tính với bộ chọn anh chị em liền kề, +.
img [src $ = ". jpg"] + figcaption màu nền: # a8b700;
Đoạn mã trên sẽ nhắm mục tiêu mọi hình ảnh có thuộc tính nguồn kết thúc bằng .jpg, sau đó bộ chọn liền kề sẽ tìm thấy phần tử bên cạnh nó. Trong trường hợp này tượng hình sẽ được thêm vào với # a8b700 màu nền.
Và đây là tất cả các mã cho phần còn lại của các định dạng hình ảnh, .png và .gif.
img [src $ = ". png"] + figcaption màu nền: # 389abe; img [src $ = ". gif"] + figcaption màu nền: # 8960a7;
Bây giờ, hãy xem cách nó phát trực tiếp từ liên kết demo bên dưới hoặc nếu không bạn có thể tải xuống nguồn để kiểm tra ngoại tuyến.
- Bản giới thiệu
- Tải xuống nguồn
Nguồn hình ảnh như sau: MacPro 1, MacPro 2 và MacPro 3
Phần kết luận
Chúng tôi hy vọng rằng bạn có thể thấy khía cạnh thanh lịch của kiểu dáng bằng cách sử dụng bộ chọn đặc biệt, giống như những gì chúng tôi đã cố gắng chứng minh ở trên bằng cách sử dụng bộ chọn thuộc tính. Vì vậy, lần tới khi bạn tạo kiểu cho HTML của mình, chúng tôi khuyên bạn nên thực hiện một số nghiên cứu về việc liệu kiểu dáng của bạn có thể được áp dụng bằng cách sử dụng một số bộ chọn đặc biệt hay không, thay vì làm hỏng đánh dấu có cấu trúc đúng của bạn các lớp học hoặc là ID.
Thực tế, có thêm hai bộ chọn mới thuộc loại này mà chúng tôi sẽ đề cập trong các bài đăng tiếp theo, vì vậy hãy theo dõi.
