Question

我有一个网站，当打开菜单时，该网站将类添加到body标签。有一个右菜单和一个左菜单。当两者都打开时，这会导致我的中央列出现宽度问题。我正在尝试做一个像这样的父类：

当body标记中包含左菜单和右菜单类时，我想更改中央列。

我无法使用它，因为左菜单和右菜单处于同一父级，它们没有嵌套。因此，当我同时指定了两个类时，它会失败，因为我找不到一种方法来指定两个相等且不在级联中的事物。

.left-menu .right-menu .central-column {margin: 0 !important;}

这不起作用，但是我可以指定何时打开菜单之一，例如，所有这些菜单都可以起作用：

.left-menu .central-column,
.right-menu .central-column {margin: 0 !important;}

我尝试过类似的操作，但都没有效果。

.left-menu .right-menu {.central-column {margin: 0 !important;}}

.left-menu & .right-menu .central-column {margin: 0 !important;}

body[class="left-menu"][class="right-menu"] .central-column {margin: 0 !important;}

body[attr="left-menu"][class="right-menu"] .central-column {margin: 0 !important;}

任何人都可以帮忙吗？

Answer 1

当类在同一元素上时，您需要组合选择器。例如：

<body class="left-menu right-menu">

然后，当这些类一起出现时，.central-column会受到影响，您需要像.left-menu.right-menu那样组合CSS上的选择器（请注意，类之间没有空格）

.left-menu.right-menu .central-column {
   margin: 0 !important;
}

查看文档，Class Selectors

Answer 2

如果我正确理解您的问题，则右菜单和左菜单处于同一级别，但中央栏嵌套在它们下方。

在这种情况下，您要做的就是写

.left-menu.right-menu .central-column

在.left-menu之后留一个空格，您编写的下一个类将被解释为“具有左菜单类的元素的子代并且具有此类的任何东西”。但是，如果没有空间，您将选择同时具有两个类的所有内容。

如何指定发生两个相等类的CSS父级

2 个答案: