Lặp lại một tập hợp các màu trên các div lồng nhau bằng CSS

8

Tôi có một bộ bốn màu và tôi muốn áp dụng chúng cho các div lồng nhau, vì vậy mỗi đứa trẻ tiếp theo có một màu khác nhau. Nếu có một cấp độ lồng thứ năm, tôi muốn bắt đầu lại từ màu đầu tiên và điều này tiếp diễn ngay cả khi tôi có các cấp độ lồng sâu vô hạn . Điều này có thể thực hiện chỉ với các bộ chọn CSS và tránh JavaScript không?

Tôi hiện đang bị kẹt ở đoạn mã sau - vì bạn có thể thấy màu hồng tiếp tục được áp dụng cho tất cả các div lồng nhau sau lần thứ 4.

div {
  border: 1px solid black;
  font-weight: bold;
  padding: 30px;
}

div {
  color: red;
}

div>div {
  color: blue;
}

div>div>div {
  color: green;
}

div>div>div>div {
  color: pink;
}
<div>
  1
  <div>
    2
    <div>
      3
      <div>
        4
        <div>
          1
          <div>
            2
            <div>
              3
              <div>
                4
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Mở rộng đoạn trích

html  css  css-selectors 
— giá cả
nguồn
thử với : nth- bộ chọn
— sumeshsn1
2
Tôi không nghĩ điều này là có thể nếu không có JavaScript, nhưng tôi rất vui khi được chứng minh là sai.
— David nói phục hồi Monica
@DavidThomas giống nhau ở đây :)
— Easwee
thay đổi HTML là một khả năng? Sử dụng sectiontên hoặc lớp cho những tên hàng đầu sau đó nên chọn bộ chọn của bạnsection > div
— collardeau
@collardeau rất tiếc, đó không phải là một tùy chọn - nếu không tôi sẽ hiển thị chúng với lớp cho màu đã được áp dụng.
— Easwee

Câu trả lời:

8

Chúng ta có thể sử dụng hue-rotateđể cho hiệu quả mong muốn. Bằng cách đặt bộ lọc tại 90degnó sẽ lặp lại cứ sau 4 đứa trẻ. Bằng cách chỉ định màu bắt đầu là màu xanh lam và xoay màu 90 độ, chúng ta sẽ có màu đỏ.

Tôi không nghĩ có thể chỉ định bốn màu khác nhau theo cách bạn yêu cầu sử dụng css thuần trừ khi bạn sẵn sàng lặp lại div > div > ...cho một tổ tối đa theo lý thuyết?

div {
  border: 1px solid black;
  font-weight: bold;
  padding: 30px;
  color: blue;
  filter: hue-rotate(90deg) saturate(2.5);
}
<div>1
  <div>2
    <div>3
      <div>4
        <div>1
          <div>2
            <div>3
              <div>4
                <div>1
                  <div>2
                    <div>3
                      <div>4
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Mở rộng đoạn trích

Ví dụ với văn bản ipsum lorem:

Hiển thị đoạn mã

— Richard Parnaby-King
nguồn
Màu xanh và màu tím dường như thay đổi theo từng vòng quay đầy đủ. Nếu không thì đây là một giải pháp khéo léo.
— TylerH
Bạn đang dùng trình duyệt nào? Tôi đang nhìn thấy màu đỏ, xanh lá cây, xanh dương, hồng lặp đi lặp lại.
— Richard Parnaby-King
Tôi đang sử dụng Firefox 69.0.1 - màu sắc cũng lặp lại với tôi, nhưng sắc thái của màu xanh và màu tím thay đổi sau lần lặp đầu tiên: i.stack.imgur.com/QZsEO.png Thực tế, bây giờ tôi trông giống hơn chặt chẽ, tôi nghĩ rằng cả hai màu đỏ và xanh lá cây cũng trở nên nhạt hơn sau lần lặp đầu tiên. Màu sắc dường như không thay đổi trong Chrome (mặc dù các hộp dường như trùng nhau tùy thuộc vào không gian, ở đó, trong khi chúng có kích thước phù hợp trong Firefox).
— TylerH
Nguyên nhân bởi một vấn đề dấu phẩy động được giới thiệu với saturate. Bằng cách tăng độ bão hòa để saturate(3)chúng ta có được màu sắc chính xác giống nhau ở mỗi vòng, nhưng tôi đã nhận thấy một loại bóng hoặc chảy máu khi tôi đẩy độ bão hòa lên cao khiến cho RẤT khó đọc các ký tự. Tôi đã tăng độ bão hòa trong các ví dụ mã của mình lên 2,5 để giảm chênh lệch giữa các màu trên mỗi vòng lặp.
— Richard Parnaby-King
Heh, điều đó thay đổi màu của lần lặp đầu tiên nhưng nó vẫn khác ở FF - Tôi nghĩ có lẽ an toàn khi chấp nhận rằng nó sẽ trông khác đi chừng nào FF xử lý theo cách này.
— TylerH
5

Dưới đây là một ý tưởng về giải pháp dựa trên một số mẹo nền. Đó là một sự gần đúng hơn là một giải pháp mạnh mẽ vì tôi sẽ xem xét thực tế rằng tôi sẽ chỉ có một dòng văn bản ở mỗi cấp độ.

div {
  border: 1px solid black;
  border-bottom:0;
  font-weight: bold;
  padding: 30px 10px 0;
  line-height:1.2em;
  box-sizing:border-box;
  color:transparent;
}

.first {
  --l:calc(30px + 1.2em + 1px); /* The height of one line + the padding */
  background-image:
    repeating-linear-gradient(to bottom, 
      red    0                calc(1*var(--l)),
      blue   calc(1*var(--l)) calc(2*var(--l)),
      green  calc(2*var(--l)) calc(3*var(--l)),
      purple calc(3*var(--l)) calc(4*var(--l))
    );
  -webkit-background-clip:text;
  background-clip:text;
}
<div class="first">
  1
  <div>
    2
    <div>
      3
      <div>
        4
        <div>
          1
          <div>
            2
            <div>
              3
              <div>
                4
                <div>
                  5
                  <div>
                    6
                    <div>
                      7
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Mở rộng đoạn trích

— Temani Afif
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.