PreCSS嵌套不工作

我有以下CSS使用PostCSS precss插件聲明：PreCSS嵌套不工作

.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>

來源

2016-06-21 Jordan Carter

請張貼您的html，因爲@MattheusBica的答案可能是正確的，但無法確定。（沒有任何方法可以在沒有HTML的情況下實際發現問題）。如果可能，還可以發佈你的_output_。 – somethinghere

輸出結果是，除了.woocommerce未更改爲靜態的事實之外，每個樣式規則都正在應用。 –

刪除標記中的類名中的點.... – Red2678

-1

你需要把「.woocommerce賬戶」和「.logged，在」

像這之間的空間：

.woocommerce-account .logged-in { 

}

如果你的div的是這樣的：

<div class = "woocomerce-account"> 
    <div class = "logged-in"> 
    </div> 
</div>

希望幫助=）

編輯：更新你的問題

我想我找到了你的問題，

<body class=".woocommerce-account .logged-in">

它必須有這樣的話之前，沒有點：

<body class="woocommerce-account logged-in">

希望，現在幫助！

如果它不能幫助這個問題可能在這段代碼之外的另一個地方。

來源

2016-06-21 16:22:39

不，我在說它是.woocommerce帳戶，它也作爲一個類登錄。

然後，你做得很對，這個標籤沒有問題，這個問題可能在另一個標籤，發佈你的整個div結構（只是重要的），檢查我的新編輯。 –

我用html更新了我的答案。另請注意關於擴展CSS工作的部分。只是由於某種原因，嵌套版本失敗。 –

您可能會提供更多的上下文來獲得答案，但可能您錯誤position: static;爲position: fixed;。

靜態是位置的默認值，所以除非您另有設置（即在除上述之外的其他代碼中），它將保持不變。

來源

2016-06-21 16:36:04 dave

這就是答案！ – Red2678

這不是答案。靜態位置是故意的。這個問題與嵌套有關。如果我像我在我的問題中那樣展開CSS，它的工作原理與我想要的完全相同，但由於某些原因，當我嵌套它時，靜態規則無法應用。此時忘記自己的實際規則。事實是，當我嵌套時，一些樣式甚至沒有被應用，但是當我擴展它時它確實被應用。 –

PreCSS嵌套不工作

回答

相關問題