在网页开发中，图片元素通常通过 img 标签来插入。使用CSS选择器可以精准地为这些图片设置样式，比如控制大小、边框、对齐方式和响应式行为等。
1. 基本图片选择器
最直接的方式是使用标签选择器 img 来统一设置页面中所有图片的样式：img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
2. 使用类选择器区分不同图片
如果页面中有多种用途的图片（如头像、轮播图、图标），可以通过 class 来分别设置样式：.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.gallery-img {
width: 100%;
margin-bottom: 10px;
}
<img src="face.jpg" class="avatar">
<img src="photo.jpg" class="gallery-img">
3. 使用属性选择器针对特定图片
CSS 还支持通过属性匹配来选择图片，例如根据文件类型或路径：img[src*=".webp"] {
border: 2px solid green;
}
img[alt="封面"] {
width: 300px;
display: block;
margin: 10px auto;
}
4. 后代与上下文选择器
若只想设置某容器内的图片，可以结合父元素使用后代选择器：.article-content img {
max-width: 100%;
margin: 10px 0;
}
基本上就这些常见用法。合理使用CSS选择器能让图片展示更规范、美观，同时提升页面的响应性和可维护性。
