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嵌套不工作

回答

相关问题