CSS chọn nhiều hậu duệ của một phần tử khác

Question

Có thể chọn nhiều phần tử có tổ tiên của một lớp, id, v.v. trong CSS không? ví dụ:

table.exams caption, tbody, tfoot, thead, tr, th, td 

Nếu không, có cách nào để chọn tất cả hậu duệ của phần tử đó không?

Answer 1

Có thể chọn nhiều phần tử có tổ tiên của một lớp, id, v.v. trong CSS không?

Hiện nay, không phải không có sao chép toàn bộ selector tổ tiên và xác định tất cả các con cháu, không may :

table.exams caption, 
table.exams tbody, 
table.exams tfoot, 
table.exams thead, 
table.exams tr, 
table.exams th, 
table.exams td 

Nó chỉ là đến muộn sau Selectors 3 đã được hoàn thiện mà họ đề xuất một giả ký hiệu lớp để thực hiện điều này và chỉ gần đây các triển khai cơ bản mới bắt đầu hiển thị. Xem this answer để biết một chút bài học lịch sử.

Tóm lại, lớp giả hiện được nhập chuẩn được gọi là :matches(). Trong tương lai xa, khi trình duyệt bắt đầu thực hiện :matches(), bạn sẽ có thể làm điều gì đó như thế này:

table.exams :matches(caption, tbody, tfoot, thead, tr, th, td) 

Nếu không, có cách nào để chọn tất cả hậu duệ của lớp đó?

Vâng, bạn chỉ cần sử dụng dấu hoa thị *, đại diện cho any element. Cho rằng bạn có th và td trong chọn của bạn, bạn có thể có nghĩa là tất cả các con cháu chứ không phải tất cả trẻ em của table.exams, do đó, không sử dụng >, sử dụng một không gian thay vì:

table.exams * 

Nhưng thực sự, tránh làm điều này . Nếu bạn có thể, làm hết sức mình để xác định loại hậu duệ bạn đang cố chọn.

---

_{Cụ thể với các bảng, bạn có thể nhận được ngay với table.exams > :not(.colgroup), table.exams > * > tr > *, nhưng như bạn có thể nói điều này là vô cùng khó hiểu (chưa kể nó giả sử bạn không có script-supporting elements hoặc lồng các bảng bên trong bảng này) và bạn tốt hơn hết chỉ liệt kê tất cả các hậu duệ bạn muốn một cách rõ ràng.}

Answer 2

chọn con trông như thế này:

ul > li { 

} 

này sẽ nhắm mục tiêu tất cả các li đó là con trực tiếp của ul

nếu bạn muốn nhắm mục tiêu tất cả các con cháu, sử dụng bộ chọn *

Tôi không chắc là tôi đã hiểu phần đầu tiên của câu hỏi của bạn!

Answer 3

Có thể chọn nhiều thẻ có tổ tiên của một lớp nhất định trong CSS không?

Có thể sử dụng SCSS để đạt được một kết quả tương tự như: trận đấu, như thể hiện trong this article

Ngoài ra, trình duyệt nhất định có hỗ trợ một phần cho :matches với nhà cung cấp tiền tố cụ thể.