Tôi muốn tránh sử dụng các hàm hoặc vòng lặp trong mẫu WordPress tùy chỉnh để hiển thị các màu nền khác nhau cho các thành phần cụ thể. Vấn đề của tôi là vùng chứa và phần tử gốc của nó cần được thay đổi.
Mỗi hồ sơ lớp 1, 4, 7, v.v. cần có màu nền xanh. Mỗi lớp hồ sơ thứ 2, 5, 8, v.v. cần có màu nền đỏ. Ngày thứ 3, thứ 6, thứ 9,… cần có màu nền xanh.
Tôi đã thử sử dụng các kết hợp khác nhau của .profile:nth-child và .profile:nth-of-type, nhưng chỉ có 2 phiên bản lớp trong lớp cha mẹ của nhân viên đặt lại màu nền.
Hiện tại tôi nhận được một cái gì đó như thế này:
(màu xanh da trời)
(màu đỏ)
(màu xanh da trời)
(màu đỏ)
(màu xanh da trời)
(màu đỏ)
....
Khi điều tôi muốn thấy là:
(màu xanh da trời)
(màu đỏ)
(màu xanh lá)
(màu xanh da trời)
....
Điều này hơi phức tạp một chút, nhưng giả sử mỗi .nhân viên
Các phần tử chỉ có thể chứa tối đa 2 .hồ sơ
yếu tố,nó có thể được thực hiện - mặc dù .nhân viên
Nhóm bắt đầu lặp lại:
.staff:nth-child(3n+1) .profile:nth-child(1),
.staff:nth-child(3n+2) .profile:nth-child(2) {
màu nền: xanh lam;
}
.staff:nth-child(3n+1) .profile:nth-child(2),
.staff:nth-child(3n+3) .profile:nth-child(1) {
màu nền: đỏ;
}
.staff:nth-child(3n+2) .profile:nth-child(1),
.staff:nth-child(3n+3) .profile:nth-child(2) {
màu nền: xanh lá cây;
}
Lưu ý rằng giả sử bạn .nhân viên
các yếu tố là duy nhất div
yếu tố,:thứ n-of-type()
sẽ không có bất kỳ ảnh hưởng nào đến cha mẹ của chúng, bởi vì :thứ n-of-type()
Chỉ xem tên thẻ và tất cả .hồ sơ
các yếu tố quá div
Dẫu sao thì.
Tôi là một lập trình viên xuất sắc, rất giỏi!