0

PostCSS precss プラグインを使用した次の CSS 宣言があります。

.woocommerce-account.logged-in {

    .myaccount-hamburger{
        display: block;
    }

    .woocommerce{
        position: static;
    }

    #main{
        position: relative;
    }

    .site-header{
        margin-bottom: 0;
    }

}

しかし、何らかの理由で、.woocommerceルールは適用されていません。理由は何か？有効なセレクタであることはわかっています。いじり始めて他の宣言をいくつか削除すると、実際には機能するからです。

このようにすべてのルールを手動で展開すると、すべてが正常に機能することに注意してください。したがって、ネスティングの問題です。

.woocommerce-account.logged-in .myaccount-hamburger{
    display: block;
}

.woocommerce-account.logged-in .woocommerce{
    position: static;
} 

.woocommerce-account.logged-in #main{
    position: relative;
}

.woocommerce-account.logged-in .site-header{
    margin-bottom: 0;
}

リクエストに応じて、ここにいくつかの HTML があります。html はたくさんあるので、基本的なものを示します...

<body class="woocommerce-account logged-in">
    <header class="site-header"></header>
    <main id="main">
        <div class="myaccount-hamburger"></div>
        <div class="woocommerce"></div>
    </main>
</body>
4

2 に答える 2