Xem chi tiết chọn phần tử thuộc tính CSS
- Trang trước Xem chi tiết chọn phần tử id CSS
- Trang sau Chọn phần tử hậu代 CSS
CSS 2 đã giới thiệu bộ lọc thuộc tính.
Bộ lọc thuộc tính có thể chọn yếu tố dựa trên thuộc tính và giá trị của thuộc tính.
Bộ lọc thuộc tính đơn giản
Nếu bạn muốn chọn các yếu tố có thuộc tính cụ thể mà không quan tâm đến giá trị của thuộc tính, bạn có thể sử dụng bộ lọc thuộc tính đơn giản.
Ví dụ 1
Nếu bạn muốn biến tất cả các yếu tố chứa tiêu đề (title) thành màu đỏ, bạn có thể viết:
*[title] {color:red;}
Ví dụ 2
Tương tự như trên, bạn có thể chỉ áp dụng phong cách cho các thẻ (a) có thuộc tính href:
a[href] {color:red;}
Ví dụ 3
Bạn có thể chọn theo nhiều thuộc tính, chỉ cần liên kết bộ lọc thuộc tính lại với nhau.
Ví dụ, để đặt văn bản của các liên kết HTML có thuộc tính href và title thành màu đỏ, bạn có thể viết như sau:
a[href][title] {color:red;}
Ví dụ 4
Bạn có thể sử dụng một số cách sáng tạo để sử dụng tính năng này.
Ví dụ, bạn có thể áp dụng phong cách cho tất cả các hình ảnh có thuộc tính alt, từ đó làm nổi bật các hình ảnh hiệu lực này:
img[alt] {border: 5px solid red;}
Lưu ý:Trường hợp đặc biệt này更适合 để chẩn đoán hơn là thiết kế, tức là để xác định hình ảnh có thực sự có hiệu lực hay không.
Ví dụ 5: Sử dụng bộ lọc thuộc tính cho tài liệu XML
Bộ lọc thuộc tính rất hữu ích trong tài liệu XML vì ngôn ngữ XML khuyến khích chỉ định tên phần tử và tên thuộc tính dựa trên mục đích của phần tử và thuộc tính.
Giả sử chúng ta đã thiết kế một tài liệu XML để mô tả các hành tinh hệ Mặt Trời. Nếu chúng ta muốn chọn tất cả các phần tử planet có thuộc tính moons, hiển thị chúng màu đỏ để chú ý đến các hành tinh có moons, chúng ta có thể viết như sau:
planet[moons] {color:red;}
Điều này sẽ làm cho văn bản của phần tử thứ hai và thứ ba trong đoạn mã sau hiển thị màu đỏ, nhưng văn bản của phần tử đầu tiên không phải là màu đỏ:
<planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet>
Chọn dựa trên giá trị thuộc tính cụ thể
Ngoài việc chọn các phần tử có thuộc tính nhất định, bạn có thể thu hẹp thêm phạm vi chọn, chỉ chọn các phần tử có giá trị thuộc tính cụ thể.
Ví dụ 1
Ví dụ, giả sử bạn muốn thay đổi văn bản của liên kết chỉ định đến một tài liệu cụ thể trên máy chủ Web thành màu đỏ, bạn có thể viết như sau:
a[href="http://www.codew3c.com/about_us.asp"] {color: red;}
Ví dụ 2
Tương tự như bộ lọc thuộc tính đơn giản, bạn có thể liên kết nhiều bộ lọc thuộc tính - giá trị lại với nhau để chọn một tài liệu.
a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}
Đây sẽ thay đổi văn bản của liên kết đầu tiên trong các thẻ sau thành màu đỏ, nhưng liên kết thứ hai hoặc thứ ba sẽ không bị ảnh hưởng:
<a href="http://www.codew3c.com/" title="W3School">W3School</a> <a href="http://www.codew3c.com/css/" title="CSS">CSS</a> <a href="http://www.codew3c.com/html/" title="HTML">HTML</a>
Ví dụ 3
Tương tự, ngôn ngữ XML cũng có thể sử dụng phương pháp này để đặt phong cách.
Dưới đây chúng ta sẽ quay lại ví dụ về hành tinh. Giả sử chỉ muốn chọn các phần tử planet có giá trị thuộc tính moons là 1:
planet[moons="1"] {color: red;}
Mã trên sẽ chuyển đổi phần tử thứ hai trong các thẻ đánh dấu sau thành màu đỏ, nhưng phần tử thứ nhất và thứ ba không bị ảnh hưởng:
<planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet>
Thuộc tính và giá trị thuộc tính phải khớp hoàn toàn
Lưu ý rằng định dạng này yêu cầu phải khớp hoàn toàn với giá trị thuộc tính.
Nếu giá trị thuộc tính chứa danh sách các giá trị được phân tách bằng khoảng trống, việc khớp có thể gặp vấn đề.
Hãy suy nghĩ về đoạn mã đánh dấu sau:
<p class="important warning">This paragraph is a very important warning.</p>
Nếu viết thành p[class="important"], thì quy tắc này không thể khớp với thẻ đánh dấu ví dụ.
Để chọn phần tử cụ thể dựa trên giá trị thuộc tính cụ thể, bạn phải viết như sau:
p[class="important warning"] {color: red;}
Chọn dựa trên bộ lọc thuộc tính phần
Nếu cần phải chọn dựa trên từ trong danh sách từ trong giá trị thuộc tính,则需要使用 dấu ~.
Giả sử bạn muốn chọn các phần tử có thuộc tính class chứa từ khóa important, bạn có thể làm điều này bằng cách sử dụng bộ lọc sau:
p[class~="important"] {color: red;}
Nếu bỏ qua dấu ~, thì có nghĩa là cần phải thực hiện匹chồng giá trị hoàn toàn.
Sự khác biệt giữa bộ lọc thuộc tính phần và cách viết tên lớp bằng dấu chấm
Bộ lọc này tương đương với cách chúng ta đã thảo luận về cách viết tên lớp bằng dấu chấm trong bộ lọc lớp.
Tức là, p.important và p[class="important"] khi áp dụng vào tài liệu HTML là tương đương.
Vậy tại sao lại có bộ lọc thuộc tính "~="? Bởi vì nó có thể được sử dụng cho bất kỳ thuộc tính nào, không chỉ là class.
ví dụ, có thể có một tài liệu chứa nhiều hình ảnh, trong đó chỉ một phần là hình ảnh. Đối với điều này, có thể sử dụng một bộ lọc thuộc tính phần dựa trên title tài liệu, chỉ chọn những hình ảnh đó:
img[title~="Figure"] {border: 1px solid gray;}
Bộ quy tắc này sẽ chọn tất cả các hình ảnh có văn bản tiêu đề chứa "Figure". Các hình ảnh không có thuộc tính tiêu đề hoặc không chứa "Figure" trong thuộc tính tiêu đề sẽ không khớp.
Bộ chọn thuộc tính khớp chuỗi con
Dưới đây tôi sẽ giới thiệu một mô-đun bộ chọn cao cấp hơn, được phát hành sau khi CSS2 hoàn thành, bao gồm nhiều phần của bộ chọn giá trị phần tử. Theo quy định, chúng nên được gọi là "Bộ chọn thuộc tính khớp chuỗi con".
Nhiều trình duyệt hiện đại đều hỗ trợ các bộ chọn này, bao gồm IE7.
Bảng sau là một tóm tắt đơn giản về các bộ chọn này:
| Loại | Mô tả |
|---|---|
| [abc^="def"] | Chọn tất cả các phần tử có giá trị thuộc tính abc bắt đầu bằng "def". |
| [abc$="def"] | Chọn tất cả các phần tử có giá trị thuộc tính abc kết thúc bằng "def". |
| [abc*="def"] | Chọn tất cả các phần tử có giá trị thuộc tính abc chứa chuỗi con "def". |
Bạn có thể tưởng tượng rằng những bộ chọn này có rất nhiều用途.
Giả sử bạn muốn áp dụng phong cách cho tất cả các liên kết trỏ đến CodeW3C.com, bạn không cần phải chỉ định class cho tất cả các liên kết này, sau đó viết phong cách dựa trên class đó, mà chỉ cần viết quy tắc sau:
a[href*="codew3c.com"] {color: red;}
Lưu ý:Bất kỳ thuộc tính nào cũng có thể sử dụng các bộ chọn này.
Loại người chọn thuộc tính đặc biệt
Cuối cùng, tôi sẽ giới thiệu người chọn thuộc tính đặc biệt. Hãy xem ví dụ sau:
*[lang|="en"] {color: red;}
Bộ quy tắc này sẽ chọn tất cả các phần tử có thuộc tính lang bằng en hoặc bắt đầu bằng en-. Do đó, ba phần tử đầu tiên trong ví dụ đánh dấu sau sẽ được chọn, mà không chọn hai phần tử sau cùng:
<p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-<p lang="au">G'day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p>
Nói chung, [att|="val"] có thể được sử dụng cho bất kỳ thuộc tính nào và giá trị của nó.
Giả sử một tài liệu HTML có một loạt hình ảnh, trong đó tên tệp của mỗi hình ảnh đều có dạng figure-1.jpg và figure-2.jpgVậy bạn có thể sử dụng bộ chọn sau để khớp tất cả các hình ảnh này:
img[src|="figure"] {border: 1px solid gray;}
Tất nhiên, mục đích phổ biến nhất của người chọn thuộc tính này là để khớp giá trị ngôn ngữ.
Tài liệu tham khảo chọn phần tử CSS
| Chọn phần tử | Mô tả |
|---|---|
| [attribute] | Dùng để chọn phần tử có thuộc tính đặc định. |
| [attribute=value] | Dùng để chọn phần tử có thuộc tính và giá trị đặc định. |
| [attribute~=value] | Dùng để chọn phần tử chứa từ ngữ đặc định trong giá trị thuộc tính. |
| [attribute|=value] | Dùng để chọn phần tử có giá trị thuộc tính bắt đầu bằng giá trị đặc định, giá trị này phải là từ hoàn chỉnh. |
| [attribute^=value] | Phát hiện mỗi phần tử bắt đầu bằng giá trị đặc định trong giá trị thuộc tính. |
| [attribute$=value] | Phát hiện mỗi phần tử kết thúc bằng giá trị đặc định trong giá trị thuộc tính. |
| [attribute*=value] | Phát hiện mỗi phần tử chứa giá trị đặc định trong giá trị thuộc tính. |
- Trang trước Xem chi tiết chọn phần tử id CSS
- Trang sau Chọn phần tử hậu代 CSS
