CSS中的备用嵌套样式是否可能？ [英] Are alternate nested styles possible in CSS?

问题描述

这是我想实现的（没有内联样式）：

/ p>

 < div style =background：#fff;> 
< div style =background：＃000;> 
< div style =background：#fff;> 
< div style =background：＃000;> 
等等... 
< / div> 
< / div> 
< / div> 
< / div> 
  

我觉得我必须缺少明显的东西！我尝试了 div：nth-​​of-type（2n），但这似乎只适用于一个级别。

这是一个实验，其中div是生成的，所以解决方案需要是无限的（不是沿着div div div div = white的行）。我知道这很容易用JavaScript，只需寻找一个纯CSS解决方案。

解决方案

Lister在一个级别（所选div的父级）上指出了第n个类型的作品。

据我所知，通过查看 W3C CSS3选择器似乎没有任何css选择器穿越嵌套除了>选择器，它只考虑父对象的直接子对象）。

我会爱te被证明是错误的，因为这可能非常有用。

因此，唯一的（css）解决方案是你已经说明的： div> div> div {background：white; }
不能只是生成div和div的生成吗？

I'm doing a little experiment, trying to alternate background colours for nested divs.

This is what I intend to achieve (without the inline styles):

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

I feel like I must be missing something obvious! I tried div:nth-of-type(2n) but this appears to only apply on one level.

This is for an experiment where the divs are generated, so the solution needs to be endless (not something along the lines of div div div div = white). I know it's quite easy with JavaScript, just looking for a pure CSS solution.

解决方案

As Mr Lister pointed out nth-of-type works on one level (that of the parent of the selected div).

As far as i know and after looking through the W3C CSS3 Selectors there doesn't appear to be any css selectors for traversing through nesting (except the > selector, which only looks at the direct child of parent).

I would love te be proven wrong though as that could be very usefull.

So the only (css) solution would be the one you already stated: div > div > div {background: white; } Can't you just generate this along with the generation of the div's?

这篇关于CSS中的备用嵌套样式是否可能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！