Câu hỏi Chọn tất cả các phần tử con đệ quy trong CSS


Làm thế nào bạn có thể chọn tất cả các phần tử con một cách đệ quy?

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

Lớp này chỉ ném một lớp vào className đã định nghĩa và tất cả các lớp con ngay lập tức. Làm thế nào bạn có thể, theo một cách đơn giản, chọn tất cả các childNodes như thế này:

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

289
2018-02-05 22:19


gốc




Các câu trả lời:


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

div.dropdown * {
    color: red;
}

x y khớp với mọi phần tử y đó là bên trong xTuy nhiên, lồng nhau sâu sắc nó có thể là - trẻ em, cháu và như vậy.

Dấu hoa thị * khớp với bất kỳ phần tử nào.

Đặc điểm chính thức: CSS 2.1: Chương 5.5: Bộ chọn con cháu


459
2018-02-05 22:21



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 những ưu tiên mà thuộc tính có, không chỉ ở vị trí trong tệp mà chúng xuất hiện. Bạn có thể thử thêm `! Important` vào giá trị của mình, ví dụ: color: red !important; - anroesti
Tôi biết, đó là một chút xấu xí. Thay vào đó, bạn có thể thử viết các bộ 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
Tôi không nghĩ rằng tôi nhận được nó :) bạn có thể làm một ví dụ tốt hơn? - clarkk
Được rồi, ví dụ rất cơ bản: p.xy quan trọng hơn p, bởi vì nó là loại cụ thể hơn. jsfiddle.net/ftJVX - anroesti


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 > *

96
2018-03-29 16:06