Question

鉴于以下html和css，我无法理解父母为什么会变绿并且每个子项目都没有被着色，或者可能是所有div都包括父级和绿色。当我想要父母保持白色时，奇怪的孩子（听起来不对）是绿色的，而偶数的孩子则是蓝色的。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
    .flexParent
    {
        display:-ms-flexbox;
        -ms-flex-direction:row;
        -ms-flex-pack:start;
        -ms-flex-wrap:wrap;
        border-style:dashed;
        border-color:purple;
    }

        .flexParent > div {
            -ms-flex:none;
           max-width: 50px;
           max-height: 50px;
        }

    .flexParent:nth-child(odd)
    {
        background-color:green;
    }

        .flexParent:nth-child(even) {
            background-color: blue;
        }
</style>
</head>
<body>
<div class="flexParent">
    <div>Child1</div>
    <div>Child2</div>
    <div>Child3</div>
    <div>Child4</div>
    <div>Child5</div>
    <div>Child6</div>
    <div>Child7</div>
    <div>Child8</div>
</div>
</body>
</html>

Answer 1

您可以在直接子div元素上使用:nth-child()，而不是父元素。

因此.flexParent:nth-child(even)

..将是.flexParent > div:nth-child(even)

EXAMPLE HERE

.flexParent > div:nth-child(odd) {
    background-color: green;
}

.flexParent > div:nth-child(even) {
    background-color: blue;
}

我的div没有正确着色

1 个答案: