基于 body class 名称的高级 CSS 选择器查询

Question

任何人都可以建议我如何创建一个 css 规则，该规则会根据 body class 而变化吗？这是在移动应用程序中使用的 backbone js 应用程序中。

目前，我将在 body 标签上为 class 使用 'ks3' 或 'ks4'（如下所示），我想要.menu class 用于 ks3 & 一个用于 ks4

当前 CSS :

.menu {
 background-image:url(../img/navigation/bg-768x1024.png);  // need to set to null if body class has ks4
 background-size: cover;
 color: #fff;
}

html

<body class="ks4">
  <div class="stk">
    <div class="shell"> 
      <div class="menu"> 
       <!-- my menu here-->
      </div>
    </div>
 </div>
</body>

所以本质上我正在尝试在伪代码中执行以下操作..

if (body class 是 'ks4') { 使用现有的 .menu class 但将 background-image 设置为 none。 }

使用高级 CSS 选择器是否可行？

Answer 1

由于您为 .menu 设置了规则，因此它适用于具有菜单 class 的所有元素。现在您需要做的就是设置一个规则来覆盖当前的背景图片规则。

body.ks4 .menu{
    background-image:none !important;
}

基于 body class 名称的高级 CSS 选择器查询

advanced CSS selector query based on the body class name

html

css

css-selectors

backbone.js

html