Tại sao phải sử dụng bộ chọn thuộc tính để so khớp các lớp?

Tôi đã tìm thấy một ví dụ về các mẫu email đáp ứng trong đó có các bộ chọn CSS như sau:

a[class="btn"]

Tại sao cú pháp này được sử dụng nếu nó hoàn toàn giống như:

a.btn

Nó có bất kỳ tác động nào đến trình duyệt di động hoặc bất kỳ điều gì khác không?

css css-selectors

— ducin
nguồn

@Jevgeni Bogatyrjov: Đó là một câu hỏi hoàn toàn khác, thậm chí không liên quan đến CSS, nhưng tôi có thể thấy nó có thể gây nhầm lẫn như thế nào vì tiêu đề không chính xác. Tôi đã chỉnh sửa nó.

— BoltClock

142

Các []cú pháp là một selector thuộc tính .

a[class="btn"]

Thao tác này sẽ chọn bất kỳ <a>thẻ nào có class="btn". Tuy nhiên, nó sẽ không chọn <a>cái nào có class="btn btn_red", ví dụ (ngược lại a.btn). Nó chỉ khớp chính xác với thuộc tính đó.

Bạn có thể muốn đọc 30 công cụ chọn CSS mà bạn phải ghi nhớ . Nó vô giá đối với bất kỳ nhà phát triển web nào đang phát triển.

— Eric
nguồn

nhưng nó không liên quan gì đến khả năng đáp ứng, đó là cú pháp CSS thuần túy, phải không?

— ducin

@tkoomzaaskz Đúng.

— Eric

Tôi cũng đã xem qua hướng dẫn tương tự ( campaignmonitor.com/guides/mobile/coding ) - có vẻ kỳ lạ là họ sẽ sử dụng kỹ thuật này trong một hướng dẫn. Hướng dẫn nên làm cho mọi thứ rõ ràng nhất có thể cho những người mới bắt đầu. Đặc biệt là khi .btnbộ chọn chung sẽ đủ. Tôi có thiếu cái gì đó không? Có lợi ích gì cho việc này không? Tính cụ thể hơn tôi đang đoán?

— nickspiel

không có cách nào mới để chọn tất cả các tên lớp bằng cách sử dụng jQuery và dấu ngoặc để nhận ở tất cả các lớp có cùng tiền tố? Một cái gì đó như $ (this) .css ("[class ~ = 'btn_']", "red"); Cú pháp có thể sai, nhưng bạn có biết cú pháp đúng là gì không?

— whyoz

Sẽ thật tuyệt nếu bạn cập nhật câu trả lời của mình để hiển thị cả các loại bộ chọn thuộc tính khác. Tìm kiếm "dấu ngoặc vuông của bộ chọn css" sẽ đưa ra câu hỏi này trong một tìm kiếm và rất khó để tìm kiếm các biến thể khác ("dấu sao ngoặc vuông của bộ chọn css").

— cimmanon