Chọn phần mở rộng CSS

Selector phụ

Bằng cách định nghĩa樣式 dựa trên ngữ cảnh của element trong vị trí của nó, bạn có thể làm cho mã đánh dấu trở nên gọn gàng hơn.

Trong CSS1, selector được sử dụng để áp dụng quy tắc này được gọi là selector ngữ cảnh (contextual selectors), vì chúng phụ thuộc vào mối quan hệ ngữ cảnh để áp dụng hoặc tránh một quy tắc. Trong CSS2, chúng được gọi là selector phụ, nhưng dù bạn gọi chúng gì, chúng đều có cùng một tác dụng.

Selector phụ cho phép bạn xác định樣式 của một thẻ dựa trên ngữ cảnh của tài liệu. Bằng cách sử dụng selector phụ một cách hợp lý, chúng ta có thể làm cho mã HTML trở nên gọn gàng hơn.

Ví dụ, nếu bạn muốn element strong trong danh sách trở thành chữ nghiêng thay vì chữ in đậm thông thường, bạn có thể định nghĩa một selector phụ như sau:

li strong {
    font-style: italic;
    font-weight: normal;
  }

Vui lòng chú ý đến mối quan hệ ngữ cảnh của mã màu xanh được đánh dấu là <strong>:

<p><strong>Tôi là chữ in đậm, không phải nghiêng, vì tôi không trong danh sách, vì vậy quy tắc này không áp dụng cho tôi</strong></p>
<ol>
<li><strong>Tôi là chữ nghiêng. Đó là vì element strong nằm trong li.</strong></li>
<li>Tôi là font bình thường.</li>
</ol>

Trong ví dụ trên, chỉ có樣式 của strong trong li là nghiêng, không cần định nghĩa class hoặc id đặc biệt cho strong, mã sẽ trở nên gọn gàng hơn.

Xem thêm các quy tắc CSS dưới đây:

strong {
     màu: red;
     }
h2 {
     màu: red;
     }
h2 strong {
     màu: blue;
     }

Dưới đây là HTML mà nó ảnh hưởng:

<p>Từ được nhấn mạnh mạnh mẽ trong đoạn này là<strong>màu đỏ</strong>.</p>
<h2>Tiêu đề phụ này cũng là màu đỏ.</h2>
<h2>Từ này được nhấn mạnh mạnh mẽ trong tiêu đề phụ là<strong>blue</strong>.</h2>

Nội dung liên quan

Nếu bạn cần tìm hiểu sâu hơn về kiến thức chọn phần mở rộng, hãy đọc các nội dung sau trong hướng dẫn nâng cao của CodeW3C.com: