Tìm hiểu Attribute selector

0
11

Trong bài trước, chúng ta đã tìm hiểu Tìm hiểu Class selector và ID selector bạn còn nhớ chứ, với class selector là dấu ., id selector là #

Trong bài này chúng ta sẽ tìm hiểu Attribute selector"
vậy Atrribute là gì ? mỗi thẻ HTML có nhiều thuộc tính đó gọi là Attribute ( target, alt.. )
bạn xem qua vd sau:

<a href="gioi-thieu.html">Giới thiệu</a>
<a href="nguyen-lieu.html" target="_blank">Nguyên liệu</a>
<a href="cach-lam.html" target="_top">Cách làm</a>
<img src="img/cake1.png" alt="banh kem" />
<img src="img/cake2.png" alt="birthcake" />

Chúng ta sử dụng sử dụng [Tên Attribute],
vậy làm sao để ta chỉ ra thuộc tính Attribute cụ thể đó là [target=”_top”]

Vậy muốn tìm các thuộc tính tương đối thì phải làm sao, ta có ví dụ sau

<img src="img/cake1.png" alt="birthcake tim" />
<img src="img/cake2.png" alt="hình birthcake tròn" />
<img src="img/cake3.png" alt="hìnhbirthcake dâu" />

Ta dùng [alt~=“birthcake”] nghĩa là nó sẽ lấy giá trị gần giống bắt đầu với từ chỉ định gần giống birthcake.

Ta cũng có thể lấy atribute bằng từ bắt đầu với kí hiệu ^=, [alt^=”hình”],
và nếu khớp từ chỉ đinh bắt đầu cần lấy thì dùng [alt!=”hình”]
sự khác nhau của ^= và |= là:
^=: nó sẽ lấy các từ bắt đầu là giá trị cần lấy mà không quan tâm phía sau
|=: nó sẽ lấy các từ bắt đầu là giá trị cần lấy mà phía sau là khoảng trắng hoặc dấu –
(hãy phân biệt thật kỹ nhé các bạn )

Ta cũng có thể lấy attribute bằng từ cuối cùng với kí hiệu $=, [alt$=”dâu”]

Tiếp theo chúng ta sẽ đến với kí hiệu *=, [alt*=”cake”], kí hiệu này có nghĩa là đại diện một từ
nào đó, và lấy từ chỉ định có chữ cake

Sự khác nhau giữa ~= và *=:

~=: các từ cần lấy có từ chỉ định ngăn cách bởi khoảng cách (lấy trọn từ).

*=: các từ cần lấy có từ chỉ định không phân biệt trước sau là gì.

Kết luận

Vậy là các bạn đã tìm hiểu được Attribute Selector rồi phải không, hãy lưu ý về kí tự và cú pháp của nó để sử dụng khi cần thiết so sánh sự giống nhau và khác nhau của các kí tự đó cũng như ưu điểm và nhược điểm, khi nào thì sử dụng kí tự chỉ định nào
chúc các bạn học tốt.

Tài liệu tham khảo

  1. http://www.w3.org/TR/CSS21/selector.html#attribute-selectors
  2. http://www.w3schools.com/css/css_attribute_selectors.asp
0

BÌNH LUẬN

Nhập bình luận của bạn
Vui lòng nhập tên