CSS - 如何为子元素应用 css plus 选择器

debugcn 发表于 Dev

丹尼尔·史密斯

我尝试根据处于活动状态的其他 div 类为主体的子元素应用 CSS 样式。

HTML：

<body class="restrict-body-scroll">
    <div class="main-wrapper">
        <div class="global-banner hide">GLOBAL BANNER ITEM HERE</div>
        <div class="alter-banner hide">ALTER BANNER ITEM HERE</div>
        <header class="header">
            <div class="item-left"></div>
            <div class="item-center"></div>
            <div class="item-right">
                <div class="overlay">
                    <div class="overlay-container">
                        <h3>Welcome Guest!</h3>
                    </div>
                </div>
            </div>
        </header>
    </div>
</body>

CSS：我尝试的 -

.global-banner.hide{
    display:none !important;
}
.global-banner .item-right .overlay-container{
    height:0;
}
body.restrict-body-scroll .global-banner.hide + .header .item-right .overlay-container.active{
    height:100vh;
}

但它不工作！

苏米特·帕特尔

+ 将选择紧跟在所选元素之后的元素：对于您的示例，您需要 ~

检查代码段，您将看到两个示例。

.global-banner.hide {
  display: none !important;
}

.global-banner .item-right .overlay-container {
  height: 0;
}

body.restrict-body-scroll .item-center+.active {
  height: 100vh;
  color: red;
}

body.restrict-body-scroll .global-banner.hide~.header .item-right .overlay-container.active {
  font-size: 100px;
}

<body class="restrict-body-scroll">
  <div class="main-wrapper">
    <div class="global-banner hide">GLOBAL BANNER ITEM HERE</div>
    <div class="alter-banner hide">ALTER BANNER ITEM HERE</div>
    <header class="header">
      <div class="item-left"></div>
      <div class="item-center"></div>
      <div class="item-right active">
        <div class="overlay">
          <div class="overlay-container active">
            <h3>Welcome Guest!</h3>
          </div>
        </div>
      </div>
    </header>
  </div>
</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。