时间戳

首页 > 解决方案 > 使用 CSS 影响曾孙

html - 使用 CSS 影响曾孙

问题描述

我有一个导航栏，当它滑动时会粘在页面顶部，当发生这种情况时，它会向“粘在”的 div 添加两个类，这非常有效，但我想做的是

<div class="navbar navbar-expand-sm sticked in">
    <div class="container">
        <div class="header-logo">
             <a href="http://localhost/2021/site/">
                <img src="logo.svg" class="custom-logo">
             </a>
         </div>
     </div>
</div>

在它粘住之后我想缩小img（logo.svg）所以我要寻找的是正确的选择器，如果“粘在”在我的导航栏上改变.header-logo img的高度

例如：

.sticked.in > div > a > .header-logo img{
    height: 20px;
}

显然，这些是错误的选择器，所以我正在寻找一种将 css 向下传递到 header-logo img 的方法，如果存在“sticked in”

标签： htmlcss

解决方案

您不需要>子选择器。切换示例：

document.getElementById("toggle-class")
        .addEventListener("click", function() 
{
    document.querySelector(".navbar")
            .classList.toggle("sticked");
});
img {
  height: 50px;
  width: 50px;
  background-color: red;
}

.sticked.in .custom-logo {
  background-color: blue;
}
<div class="navbar navbar-expand-sm sticked in">
    <div class="container">
        <div class="header-logo">
             <a href="http://localhost/2021/site/">
                <img class="custom-logo">
             </a>
         </div>
     </div>
</div>

<button id="toggle-class">Toggle</button>

推荐阅读