时间戳

首页 > 解决方案 > 如何将 ID 和 Class 与 active 结合在一起？

html - 如何将 ID 和 Class 与 active 结合在一起？

问题描述

我想创建一个侧边栏，当它处于活动状态时，我希望包装器将其更改margin-left为 89px 以使其响应。

有没有办法将 ID、活动类和仪表板包装类组合在一起？CSS

#sidebar.active .dashboard-wrapper {
   margin-left: 89px;
}

HTML 放置

<div class="nav-left-sidebar sidebar-dark" id="sidebar">
    SIDEBAR CONTENTS
</div>

<div class="dashboard-wrapper">
    MAIN CONTENT
</div>

标签： htmlcss

解决方案

.dashboard-wrapper不是 的孩子#sidebar，是兄弟姐妹。使用+选择器。

#sidebar.active + .dashboard-wrapper {
   margin-left: 89px;
}

或者使用您当前的样式并更改 HTML 标记并.dashboard-wrapper放入#sidebar.

<div class="nav-left-sidebar sidebar-dark" id="sidebar">
    SIDEBAR CONTENTS

    <div class="dashboard-wrapper">
        MAIN CONTENT
    </div>
</div>

推荐阅读