为何通过.newsfeed与.card类设置嵌套图片样式无效？

嘿，我一眼就看到问题啦——你的CSS选择器没匹配到正确的元素，根源在于HTML的层级结构。

先回头看你的HTML结构：

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

.card-img-top 并不是 .card 的直接子元素——它被包裹在 .wrapper_newsfeed 这个容器里，是 .card 的孙子元素。而你用的 > 是直接子选择器，它只会匹配前面元素的直接子节点，所以原来的选择器 .newsfeed .card > .card-img-top 根本找不到目标图片，样式当然不会生效。

修正方案 #

你有两种简单的修正方式：

1. 去掉直接子选择器 >，让选择器匹配所有后代元素：

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

2. 精确匹配层级（推荐，避免意外匹配其他同名元素）：

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

这样选择器就能准确找到目标图片，hover效果也能正常触发啦～

内容的提问来源于stack exchange，提问作者nived