Question

我有一个ID，显示我网站顶部的图片

<div id="Introduction">

当我点击<div>时，它会切换有效的班级active。

然而，背景图像似乎没有改变 - 任何人都可以告诉我为什么？

我知道正在添加这个类，因为我可以通过检查元素来看到。

#Introduction
{
    width: 95%;
    height: 280px;
    padding-top: 85px;  
    padding-left: 5%;
    background-image: url('background1.jpg');
    background-size: cover;                  
    background-position: center center; 
    transition: all 1s ease-in-out; 
 }

#Introduction .active
{
    background-image: url('background2.jpg');
}

Answer 1

您的选择器出错，您正在检查.active的后代#Introduction。它应该是#Introduction.active，没有空格。

Answer 2

只需移除#Introduction .active之间的空白区域即可。与#Introduction.active一样。

两个简单选择器A B之间的空格称为后代组合，它将选择B s后代的所有A。

在此特定实例中，.active类也被添加到具有#Introduction ID的div中，因此您应该使用这两个选择器而不使用任何组合器（空格，{ {1}}大于号，等等。）。

为什么课程不更新ID？

2 个答案: