Giới thiệu về bộ chọn thuộc tính

Trong module này, chúng ta sẽ khám phá thế giới của bộ chọn thuộc tính (attribute selector), một công cụ mạnh mẽ giúp bạn thao tác và tương tác với các phần tử trên trang web hiệu quả hơn. Bộ chọn thuộc tính đặc biệt hữu ích khi bạn muốn nhắm đến các phần tử cụ thể dựa trên thuộc tính của chúng. Bạn có thể dùng chúng để chọn các phần tử có một thuộc tính cụ thể, một thuộc tính có giá trị cụ thể hoặc một thuộc tính có giá trị chứa một mẫu nhất định.

Ví dụ: bộ chọn sau chọn tất cả phần tử có thuộc tính class:

[class]

Bộ chọn sau chọn tất cả phần tử có thuộc tính class với giá trị my-class:

[class="my-class"]

Bộ chọn sau chọn tất cả phần tử có thuộc tính href bắt đầu bằng giá trị https://:

[href^="https://"]

Vì sao cần bộ chọn thuộc tính

Bộ chọn thuộc tính hữu ích cho nhiều mục đích. Bạn có thể dùng chúng để:

• Chọn các phần tử có kiểu dáng cụ thể.
• Chọn các phần tử được liên kết với một trang cụ thể.
• Chọn các phần tử do người dùng gửi.
• Chọn các phần tử được gắn một từ khóa cụ thể.

Cách bộ chọn thuộc tính cải thiện việc chọn phần tử

Bạn có thể dùng bộ chọn thuộc tính để cải thiện việc chọn phần tử theo nhiều cách. Ví dụ, bạn có thể dùng chúng để:

• Chọn các phần tử mà những bộ chọn khác không chọn.
• Chọn các phần tử nằm bên trong những phần tử khác.
• Chọn các phần tử nằm ở những vị trí cụ thể trong tài liệu.