代码之家 › 专栏 › 技术社区 › Gudradain

嵌套元素交替背景色的循环css规则

css html

Gudradain · 技术社区 · 6 年前

我有一个动态页面,用户可以在其他div中添加任意数量的div。每个div都有一个背景色,我希望背景色每3个div重复一次。

目前,我正在编写这样的css规则

div {
  padding-top: 20px;
  margin-left: 10px;
}

div {
  background-color: blue;
}

div>div {
  background-color: red;
}

div>div>div {
  background-color: green;
}

div>div>div>div {
  background-color: blue;
}

div>div>div>div>div {
  background-color: red;
}

div>div>div>div>div>div {
  background-color: green;
}

div>div>div>div>div>div>div {
  background-color: blue;
}


/* and it continues... */

<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

有没有其他方法来处理CSS?

1 回复 | 直到 5 年前

Temani Afif BoltClock 6 年前

这不是一个直接的答案,但如果您可以嵌套替代元素(例如div,section),这里有一个想法,您可以如何使用纯CSS。诀窍是使用CSS变量来控制 background-position 然后为每个子对象增加它,以便将背景移动到下一个颜色。您需要替换元素才能实现增量,使用一个元素,我们将有一个周期,它不会工作。

:root {
 --i:1;
 --j:1;
}

div,section {
  padding-top: 20px;
  margin-left: 10px;
  background: 
    repeating-linear-gradient(to bottom, 
      blue 0, blue calc(100%/3), 
      red calc(100%/3), red calc(2*100%/3), 
      green calc(2*100%/3), green 100%);
  background-size:100% 300%;
}
section {
 --j:calc(var(--i) + 1);
 background-position:0 calc(var(--j) * 100%);
}

div {
 --i:calc(var(--j) + 1);
 background-position:0 calc(var(--i) * 100%);
}

<div>
  <section>
    <div>
      <section>
        <div>
          <section>
            <div>

            </div>
          </section>
        </div>
      </section>
    </div>
  </section>
</div>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前