Chọn tất cả các phần tử con đệ quy trong CSS

407

Làm thế nào bạn có thể chọn tất cả các yếu tố con đệ quy?

div.dropdown, div.dropdown > * {
    color: red;
}

Lớp này chỉ ném một lớp trên className được xác định và tất cả các con ngay lập tức. Nói một cách đơn giản, làm thế nào bạn có thể chọn tất cả các Mã con như thế này:

div.dropdown, 
div.dropdown > *, 
div.dropdown > * > *, 
div.dropdown > * > * > *, 
div.dropdown > * > * > * > * {
    color: red;
}

css css-selectors

— clarkk
nguồn

621

Sử dụng khoảng trắng để khớp với tất cả các hậu duệ của một phần tử:

div.dropdown * {
    color: red;
}

x yphù hợp với mọi yếu tố y bên trong x , tuy nhiên nó có thể được lồng sâu - trẻ em, cháu và vân vân.

Dấu hoa thị *phù hợp với bất kỳ yếu tố nào.

Thông số kỹ thuật chính thức: CSS 2.1: Chương 5.5: Bộ chọn hậu duệ

— anroesti
nguồn

nó hoạt động, nhưng bây giờ nó ghi đè tất cả các lớp khác ngay cả khi chúng có mức độ ưu tiên cao hơn .. (chúng được đặt sau trong tệp css)

— clarkk

Bộ chọn cũng đóng một vai trò trong việc các thuộc tính có mức độ ưu tiên, không chỉ ở vị trí trong tệp mà chúng xuất hiện. Bạn có thể thử thêm 'important` để giá trị của bạn, ví dụ!color: red !important;

— anroesti

Tôi biết, nó hơi xấu. Thay vào đó, bạn có thể thử viết các công cụ chọn chính xác hơn, rất có thể, điều này cũng sẽ hoạt động. (ví dụ #head ul→ #head ul#navi)

— anroesti

Được rồi, ví dụ rất cơ bản: p.xyquan trọng hơn p, bởi vì nó là loại cụ thể hơn. jsfiddle.net/ftJVX

— anroesti

Điều gì xảy ra nếu tôi muốn tất cả trẻ em có một lớp học cụ thể?

— MEM

144

Quy tắc như sau:

A B

B là hậu duệ của A

A > B

B là con của A

Vì thế

div.dropdown *

và không

div.dropdown > *

— TennMI Abdennour
nguồn