将光标悬停在第n个子项上的css3处不工作

他说：“我正在探索CSS 3的功能，我遇到了一些麻烦：

现在我想添加一个：悬停效果，其中元素的颜色比其默认值略浅。因此，奇数和深蓝色瓷砖的颜色略浅，偶数和浅蓝色瓷砖的颜色更浅

为了一项#服务，我制作了以下CSS：

#services:hover .card:nth-child(1) {
    background-color: #ff0084;
}

#services:hover .card:nth-child(2) {
    background-color: #21ff19;
}

#services:hover .card:nth-child(3) {
    background-color: #fffa08;
}

#services:hover .card:nth-child(4) {
    background-color: #1a1cff;
}

HTML

工作室设计
//.....//

你应该这样做。

#服务：hover.row.col-md-3.卡：第n个子（1）{
背景色：#ff0084；
}
#服务：hover.row.col-md-3.卡：第n个子（2）{
背景色：#21ff19；
}
#服务：hover.row.col-md-3.卡：第n个子（3）{
背景色：#fffa08；
}
#服务：hover.row.col-md-3.卡：第n个子（4）{
背景色：#1a1cff；
}

工作室设计
//.....//

我们需要查看您的HTML代码，谢谢。可能是

。card:hover:nth child（n）{}

的副本：（我无法关闭，因为我已经出于其他原因投票）我看到了演示，但它不起作用

 <section id="services" class="text-white">
    <div class="row">
        <div class="col-md-3">
            <div class="card">
                <div class="pt-5 pb-3 text-center">
                    <i class="far fa-lightbulb fa-4x"></i>
                </div>
                <p class="text-center">Studio Design</p>
            </div>
        </div>
        //.....//
    </div>
 </section>