html - css 样式，改变一个图像样式，而不是全部

Question

我是 CSS 的新手，我有一个带有我们公司 Logo 的粘性标题菜单，一旦用户向下滚动，菜单和图像就会缩小到 48 像素高。我用来缩小 Logo 的代码如下，但是我如何才能仅更改 Logo 图像并将 .sticky 添加到 Logo 图像而不更改所有图像，就像我在下面使用 img {} 所做的那样>?

   img {
        height: 100%;
        width: 50%;
        margin: 0;
        padding: 0;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }
    img.sticky {
        height: 100%;
        width: 25%;
        float: left;
        margin-left: 50px;
    }

Answer 1

我对你的问题有点困惑。您想将粘性类仅应用于一个 img 吗？如果是这样，您可以通过简单地创建粘性类并将其与 img 标签解除关联来实现这一点。

因此创建一个 CSS 类:

.sticky {
   height: 100%;
   width: 25%;
   float: left;
   margin-left: 50px;
}

然后在滚动事件触发时使用一些 jQuery 将该类添加到所需的图像:

$( window ).scroll(function() {
   $('img:pseudo-selector').addClass("sticky");
});

或

根据元素所在的位置，您可以使用不同类型的伪类来完成相同的任务:CodePen

参见 Pseudo-Classes

我不知道这是否正是您要找的，但这也许对您有所帮助。