如果我仅调用一个，则SCSS / CSS不会选择具有两个类的元素

Question

我正在研究wordpress主题，使用Mamp Local Server和SCSS来编译CSS。

我有一个用于菜单交互的JS脚本，因为我的菜单有子菜单。

这是在脚本之前：

<ul>
    <li></li>                            //level 0 
    <li></li>                            //level 0  
    <li>                                 //level 0 
        <ul class="children">            //level 1
            <li></li>
            <li></li>
        </ul>
    </li>  
    <li></li>                            //level 0 
</ul> 

这是在脚本之后：

<ul>
    <li></li>                            //level 0 
    <li></li>                            //level 0  
    <li>                                 //level 0 
        <ul class="children toggled-on"> //level 1
            <li></li>
            <li></li>
        </ul>
    </li>  
    <li></li>                            //level 0 
</ul> 

所以我设置了一个SCSS规则：

.toggled-on {
   display:block;
}

但是元素没有样式。

如果我将SCSS规则更改为此，它将起作用：

.children.toggled-on {
   display:block;
}

从我对CSS的了解来看，它在两种情况下都应该起作用。

我要去哪里错了？

Answer 1

正如您对原始帖子的评论所暗示的那样，这可能是一个特殊性问题，其中另一个CSS规则将覆盖您自己的问题。

我的提示：在Firefox中，您可以按 Ctrl + Shift + I 打开检查器。在那里，您可以切换伪类，如下图所示：

然后，您可以查看是否有其他规则覆盖您自己的CSS规则。

（例如：在显示的图片中，html的最小宽度为1264，body被min-width：auto覆盖）；-您可以看到它被划掉了。