使用多个类设置CSS样式

Question

我想在具有多个类名的class属性中设置css类的样式,如下所示:

<div class='step active'><a href=''>Link 1</a>
<div class='step'><a href=''>Link 2</a>
<div class='step'><a href=''>Link 3</a>

我尝试使用css代码来设置活动步骤类的样式.这是css代码:

.step {
   background: #cccccc;
}
.step .active {
   background: #08a0f2;
}

但代码不会像我想要的那样改变背景颜色.我已经试过了.

.step > .active {
   background: #08a0f2;
}

但是,它也不起作用.我怎样才能使它工作？

Answer 1

用这个:

.step.active {
   background: #08a0f2;
}

要了解有关css选择器的更多信息,请阅读以下主题:

文档:

用法和示例:

是.`.step .active`表示"a .active元素是.step元素的后代",aand`step> .active`表示"a .active元素,它直接是.step元素的子元素. " `.step.active`表示"一个同时为.step和.active的元素". (2认同)
更好地分享文档或MDN的链接,而不是提供博客的链接...... :) (2认同)