CSS3 变换 属性 不适用于响应式导航栏

Question

我找到了一篇关于此的现有文章，但给出的解决方案不适用于我的项目。 我一直在尝试创建一个响应式导航栏，并为小屏幕创建了一个汉堡菜单，它应该在应用 class .change 时倾斜 45 度，但它不起作用。

HTML

<div class="menu-toggle">
            <div class="bar change bar1"></div>
            <div class="bar bar2"></div>
            <div class="bar bar3"></div>
</div>

CSS

.navbar .menu-toggle {
    display: block;
    height: 100px;
    width: 100px;
    z-index: 1;
    align-items: center;
    margin-top: 60px;
}

.navbar .menu-toggle .bar {
    height: 5px;
    width: 30px;
    background: #333;
    color: #333;
    margin-top: 5px;
}

.navbar .menu-toggle .bar .change .bar1 {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

我做错了什么？

Answer 1

而不是：

.navbar .menu-toggle .bar .change .bar1 {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

你需要写：

.navbar .menu-toggle .bar.change.bar1 {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

因为 class 和 .bar .change .bar1 在同一个元素上。

在 class 之间放置空格意味着 class 不在同一元素上。