为何给包裹img的div加.image类无效果，给img加则生效？

• 核心差异在于CSS选择器的作用对象不同：

  • 案例2中，.image选择器直接选中带类的<img>标签，width:100px样式直接作用在图片本身，因此生效。
  • 案例1中，.image选择器选中的是包裹图片的<div>标签，样式仅作用于这个div。而width属于非继承属性，图片不会自动继承父元素div的width值，所以图片仍保持原有尺寸，看起来样式未生效。

• 若想让案例1的写法生效，需修改CSS选择器，明确指定作用在div内部的img上：

  .image img {
    width: 100px;
    height: auto;
  }
  

内容的提问来源于stack exchange，提问作者Apple-dh