Question

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

<!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>

Answer 1

应该更像是：

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

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

nth-child与相邻元素一起工作，不幸的是没有嵌套：）

Answer 2

.btn位于div内。

如果您的HTML结构如下，则

.btn:nth-child(2n)将起作用：

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

对于HTML结构，它应该是

div:nth-child(2n) .btn {
    background:yellow;
}

DEMO here.

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

2 个答案: