Html CSS 跨度与子元素交替 colored颜色

发布于05月05日

我有一个由JS框架生成的DOM struct ，可能如下所示:

span:nth-child(odd) { background-color: lightblue; }
span {
    display: block;
}

<div id="parent">
  <div class="child">
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
  </div>
  <div class="child">
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
  </div>
  <div class="child">
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
  </div>
  <div class="child">
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>

  </div>
  <div class="child">
    <span>Some text to color in alternate colors</span>
  </div>
</div>

无论父对象是否相同，我都会try 对跨度进行不同的着色. 我用伪 Select 器和这个问题CSS div alternating colour试了试，但没有成功.这是否只能通过CSS来实现，或者我应该深入研究基于JS框架的解决方案？

<div id="parent"> <div class="child"> <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span> <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span> </div> <div class="child"> <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span> </div> <div class="child"> <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span> <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span> <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span> </div> <div class="child"> <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span> <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span> <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span> <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span> <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span> <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span> </div> <div class="child"> <span>Some text to color in alternate colors</span> </div> </div>

Html CSS 跨度与子元素交替 colored颜色

推荐答案

Html相关问答推荐

角｜将动态html属性添加到子组件

Vue.js复选框对齐问题：在表格单元格中居中复选框

如何获得一个背景图像，不是模糊的内部容器，但模糊的外部'

Angular 分量被循环

带有MathJax SVG的HTML代码在XHTML中不起作用

SVG的动态CSS

顶部有文字的图像的悬停效果

如何在r中提取明显非标准html标签的值

配置了 HTML 视口的 Google Apps 脚本移动网络应用程序无法正确显示

为什么可滚动弹性项目需要 flex-basis： 0 ？

为 HTML5 文本字段设置最后六位正则表达式模式

如何调整边框半径以匹配父边框半径

Angular中如何向单选按钮添加验证

如何使用CSS Select 同级元素的：：before伪元素？

如何使背景 colored颜色逐渐渐变成另一种 colored颜色？

如何更改 Quarto 中标签crossref-def-title的标题 colored颜色？

如何让一个 div 元素粘在另一个元素上？

调整大小时 CSS 溢出

自定义进度条 Html 和 CSS 布局

所有幻灯片上的 Quarto RevealJS 标题