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的直接孩子！

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

这是一个工作片段，我在其中添加了一张图片：

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

希望它有所帮助。

Answer 2

.card-img-top不是.card的直接子项，因为您之间有.wrapper_newsfeed，因此您无法使用>选择器。

.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 3

.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%);
}

我认为这很有效。 >是直接子选择器，在这种情况下是错误的。

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

3 个答案: