css - 如何在多个类中设置图像样式

Question

我有以下类结构。

<div class="row newsfeed"> 
    <div class="col-xs-6 col-md-4"> 
        <div class="card"> 
            <div class="wrapper_newsfeed"> 
                <img class="card-img-top img-fluid" src="../resources/img/og_logo.jpg" alt="image">
            </div> 
        </div> 
    </div> 
</div> 

我想使用 .newsfeed 和 .card 设置图像样式。这是我尝试过的:

.newsfeed .card > .card-img-top {
    border-radius: 0;
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
}
.newsfeed .card:hover > .card-img-top {
    filter: brightness(120%);
    -webkit-filter: brightness(120%);
}

但它不起作用。我尝试了不同的方法，但它们也没有用，我认为这是最接近的。怎么了？

Answer 1

这里的问题是 .card-imt-top 不是 .card 的直接子级!

您不应该使用直接子选择器 >。

这是我添加图片的工作片段:

.newsfeed .card{ /* Added to see the div */
  border: 1px solid gray;
}

.newsfeed .card .card-img-top {
    border-radius: 0;
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
}
.newsfeed .card:hover .card-img-top {
    filter: brightness(120%);
    -webkit-filter: brightness(120%);
}

<div class="row newsfeed">
  <div class="col-xs-6 col-md-4">
    <div class="card">
      <div class="wrapper_newsfeed">
        <img class="card-img-top img-fluid" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWRHRpOLWW0U-Sxw8Kcdkf_AFvbL1-9pNmBxWIUGfPSprrY2o6" alt="image" width="100" height="100">
      </div>
    </div>
  </div>
</div>

希望对您有所帮助。