css - CSS 中是否可以使用替代嵌套样式?

标签 css

我正在做一个小实验,尝试为嵌套的 div 替换背景颜色。

这是我打算实现的(没有内联样式):

<div style="background: #fff;">
    <div style="background: #000;">
        <div style="background: #fff;">
            <div style="background: #000;">
                and so on...
            </div>
        </div>
    </div>
</div>

我觉得我一定遗漏了一些明显的东西!我尝试了 div:nth-of-type(2n) 但这似乎只适用于一个级别。

这是用于生成 div 的实验,因此解决方案需要无穷无尽(不是类似于 div div div div = white 的东西)。我知道使用 JavaScript 很容易,只需寻找纯 CSS 解决方案

最佳答案

正如 Lister 先生所指出的,第 nth-of-type 在一个级别(所选 div 的父级别)上工作。

据我所知,在浏览了 W3C CSS3 Selectors 之后似乎没有任何用于遍历嵌套的 css 选择器(> 选择器除外,它只查看父级的直接子级)。

我希望你被证明是错误的,因为这可能非常有用。

所以唯一的 (css) 解决方案就是您已经说过的那个:div > div > div {background: white; 不能在生成 div 的同时生成这个吗?

关于css - CSS 中是否可以使用替代嵌套样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10055299/

相关文章:

javascript - 使用 .eq closest 获取上部 div

html - CSS 模态不会位于顶部

jquery - 根据内容使用 jquery 隐藏 td

css - 修复了具有全宽图像背景的垂直侧边栏

javascript - 如何获得CSS操作图像的高度?

html - 使用背景 url 在不拉伸(stretch)的情况下将整个图像定位在 div 元素中

javascript - 使用javascript在页面加载后导航到第二个div

html - 站点 : How to centralize anchor tags? 的基金会 6

javascript - 限制来自输入和文本区域的坏词

javascript - 在 Meteor-Angular 应用程序中动态更改背景 CSS