css样式，仅更改一种图像样式

Question

I'm really new to CSS and I have a sticky header menu with our company's logo in it where the menu and the image shrink to 48 pixels high once the user scrolls down. My code I use to shrink the logo is below, but how can I change just the logo image and include the .sticky to the logo image without changing all the images like I've done below with 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

I am a bit confused by your question. Would you like to apply the sticky class to only one img? If so you could achieve this by simply creating the sticky class, and disassociating it with the img tag.

So create a CSS class:

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

Then use some jQuery to add that class to the desired image when the scroll event fires:

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

OR

Depending where the element is located, you could accomplish the same task with varying types of pseudo-classes: CodePen

See Pseudo-Classes

I don't know if this is what you're looking for exactly, but maybe this could be of help.