Css 嵌套元素中的每个2n元素_Css_Css Selectors

Css 嵌套元素中的每个2n元素

css

Css 嵌套元素中的每个2n元素,css,css-selectors,Css,Css Selectors,我想更改2n元素中的背景色。我已经测试过了，但背景颜色仍然是蓝色： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http

我想更改2n元素中的背景色。我已经测试过了，但背景颜色仍然是蓝色：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>nothing here</title>
    </head>
    <body>
        <style type="text/css">
            .btn{
                height:50px;
                width:100%;
                background:blue;
                margin-bottom:20px;
            }
            .btn:nth-child(2n){
                background:yellow;  
            }
        </style>
        <div>
            <div class="btn"></div>
        </div>
        <div>
            <div class="btn"></div>
        </div>
    </body>
</html>


这里什么都没有
.btn{
高度：50px；
宽度：100%；
背景：蓝色；
边缘底部：20px；
}
.btn:n个孩子（2n）{
背景：黄色；
}

。btn

在一个div内

.btn:n如果您的HTML结构如下所示，则第n个子项（2n）

将起作用：

<div>
    <div class="btn"></div>
    <div class="btn"></div>
</div>

它应该更像：

 .btn{
        height:50px;
        width:100%;
        background:blue;
        margin-bottom:20px;
    }
    div:nth-child(2n) .btn{
        background:yellow;  
    }

因为，在每个div中，只有一个.btn

n子元素与相邻元素一起工作，但没有嵌套（很遗憾：）

谢谢。但是我想在任何我想使用的地方使用“btn”类。因此，一个div中可能有两个按钮，或者只有一个按钮。但每一秒都应该有另一种颜色。没有办法用纯CSS实现它吗？@julesdude，没有，没有“类的第n个”选择器，这似乎是您所要求的。在HTML中，第n-XX将从同一级别的元素/兄弟中计数/选择，它不像javaScript那样通过dom计数元素。CSS现在不能做你所期望的。谢谢。但是我想在任何我想使用的地方使用“btn”类。因此，一个div中可能有两个按钮，或者只有一个按钮。但每一秒都应该有另一种颜色。“用纯CSS是没有办法实现的吗？”朱尔斯杜德没有明白。你能详细说明一下吗？Div.btn可以在页面的任何地方。它没有规定它只能在div容器中出现一次。所以我正在寻找一个规则，每2n给按钮一个不同的颜色。所以按钮出现在哪里并不重要。

 .btn{
        height:50px;
        width:100%;
        background:blue;
        margin-bottom:20px;
    }
    div:nth-child(2n) .btn{
        background:yellow;  
    }