CSS - Bộ Chọn (Selectors) Và Cách Sử Dụng - Đại Phố Web & Hosting

Có các loại: các bộ chọn đơn (basic selectors), các bộ chọn phức hợp (combinators), các lớp giả (pseudo-classes)

Bộ chọn đơn – Simple selectors

Chọn theo loại:

Bộ chọn CSS khớp với các phần tử theo loại thẻ (tagname). Nói cách khác, nó chọn tất cả các phần tử của kiểu đã cho trong một tài liệu HTML.

Cú pháp

element { style properties }

Ví dụ:

CSS /* Tất cả các phần tử <a>. */ a { color: red; } /* Tất cả các phần tử <span>. */ span { background-color: skyblue; } HTML <span>Here's a span with some text.</span> <p>Here's a p with some text.</p> <span>Here's a span with more text.</span><br /> <a href="#">Đây là nội dung thẻ a</a>

Kết quả:

Chọn theo lớp:

Bộ chọn CSS chọn các phần tử dựa vào thuộc tính class.

Cú pháp

.class_name { style properties }

Lưu ý rằng bạn cũng có thể viết theo cú pháp chọn thuộc tính

[class~=class_name] { style properties }

Ví dụ:

CSS .lop_1 { background-color: skyblue; } HTML <div class="lop_1">Div này được gắn một lớp đặc biệt lên nó!</div> <div>Thẻ div này là một div thông thường.</div> <div class="foo lop_1 bar">Các phần tử có thể có nhiều lớp và trình chọn lớp vẫn hoạt động!</div>

Chọn theo ID:

Trong một tài liệu HTML, bộ chọn theo ID khớp với một phần tử dựa trên giá trị của thuộc tính ID của nó. Thuộc tính ID của phần tử đã chọn phải khớp chính xác với giá trị đã cho trong bộ chọn.

Cú pháp

#id_value { style properties }

Lưu ý rằng bạn cũng có thể viết theo cú pháp chọn thuộc tính

[id=id_value] { style properties }

Ví dụ:

CSS #noi_dung { background-color: skyblue; } #tieu_de {font-weight: bold; color: yellow} HTML <div id="tieu_de">Đây là thẻ div có id=tieu_de.</div> <div id="noi_dung">Thẻ div này là thẻ div có id=noi_dung!</div> <div>Thẻ div này là một div thông thường.</div>

Chọn theo thuộc tính:

Bộ chọn CSS theo thuộc tính khớp với các phần tử dựa trên sự hiện diện hoặc giá trị của một thuộc tính đã cho. Bộ chọn được viết với một tên loại phía trước nó

Cú pháp

element[attr] { style properties } Đại diện cho một phần tử có một thuộc tính là attr.

element[attr=value] { style properties } Đại diện cho một phần tử có thuộc tính attr với giá trị chính xác là value.

element[attr~=value] { style properties } Đại diện cho một phần tử có thuộc tính attr có nhiều hơn một giá trị, các giá trị phân cách nhau bởi khoảng trắng, và trong các giá trị đó có một giá trị đúng bằng value.

element[attr^=value] { style properties } Đại diện cho một phần tử có thuộc tính attr có giá trị được bắt đầu bằng value.

Tham khảo thêm các cách chọn qua bài viết: Bảng đối chiếu các CSS Selector

Ví dụ:

CSS a { color: blue; } /* Liên kết nội bộ, bắt đầu với "#" */ a[href^="#"] { color: red; } /* Liên kết với thuộc tính target là "_blank" */ a[target$="_blank"] { font-weight: bold } /* Liên kết với "example" xuất hiện bất cứ đâu trong URL */ a[href*="example"] { background-color: silver } /* Liên kết kết thúc với ".org" */ a[href$=".org"] { font-style:italic } HTML <ul> <li>Văn bản thường</li> <li><a href="">Thẻ A thuộc tính href rỗng</a></li> <li><a href="#internal">Liên kết nội bộ bắt đầu với dấu #</a></li> <li><a href="#internal" target="_blank">Liên kết nội bộ với bắt đầu với dấu # và thuộc tính target _blank</a></li> <li><a href="http://example.com">Liên kết với “example” xuất hiện bất cứ đâu trong URL</a></li> <li><a href="http://www.example.org">Liên kết kết thúc với .ORG và “example” xuất hiện bất cứ đâu trong URL</a></li> </ul>

Kết quả:

Tham khảo:

• CSS là gì – Tổng quan về CSS
• Bảng đối chiếu các CSS Selector