css - 将 CSS 应用于 ul > li

Question

我目前在 WP 中使用多站点，我正在使用自定义 CSS 插件对单个站点而不是整个网络应用微小的更改。

在我们的网站中，导航菜单的子菜单由两列组成，但我想将其设为 1 列。在 chrome inspector 中，我可以轻松地做到这一点，但是当我尝试在 CSS 中应用它时，没有任何变化。我确定我在链接 div 类和其他元素时犯了错误。我所做的基本上是在检查器中复制类名称并粘贴到自定义 CSS 插件。如下图

这是我从 inspector 复制的一组类。 .header-area .main-menu > ul > li .submenu-wrap ul

.header-area.main-menu > ul > li .submenu-wrap ul{
   column-count:1;
}

但是当我这样做时它不会处理。

Answer 1

尝试:

.header-area .main-menu > ul > li .submenu-wrap ul{
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
} 

或者如果这不起作用，请尝试:

.header-area .main-menu > ul#menu-main-menu > li .submenu-wrap ul{
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
} 

可能发生的情况是自定义 CSS 插件将您的新 css 放在文档中现有 css 之前。如果是这种情况，您的更改将被现有样式表覆盖，因为您使用的是相同的选择器。通过添加 ID“#menu-main-menu”(仅以您的情况为例)，我为您的新选择器提供了更高的特异性，因此它不会被原始选择器覆盖。

注意:

1. “.header-area”是否存在于与“.main-menu”相同的元素上？因为它不在您的 jsfiddle 示例中。如果没有，请将其删除来自你的新 CSS。
2. 更改后检查您的文档并在检查员，新的 css 实际上被添加到文档中，不管它是否有效。我们需要确认插件实际工作并呈现到页面。