1. CSS选择器简介

首先，我们需要了解CSS选择器的基本概念。选择器是用于定位HTML元素的一种方法，通过选择器可以指定样式应用于哪些元素。

常见的CSS选择器包括：

  • 元素选择器：例如p，表示选择所有<p>元素。
  • 类选择器：例如.my-class，表示选择所有具有my-class类的元素。
  • ID选择器：例如#my-id，表示选择具有my-id的元素。

2. 精准选择图片

2.1 使用类选择器

<img class="responsive-image" src="image.jpg" alt="描述">

.responsive-image {
  width: 100%;
  height: auto;
}

2.2 使用ID选择器

<img id="unique-image" src="image.jpg" alt="描述">

#unique-image {
  border: 2px solid #000;
}

这个例子中，#unique-image选择器将应用于具有unique-image ID的<img>元素，为其添加边框。

2.3 使用属性选择器

属性选择器可以基于元素属性选择特定的元素。例如，以下代码将选择所有<img>元素，其src属性以.jpg结尾：

img[src$=".jpg"] {
  float: left;
  margin-right: 10px;
}

在这个例子中，[src$=".jpg"]属性选择器确保只有src属性以.jpg结尾的<img>元素会被选中，并应用样式。

3. 图片显示技巧

3.1 响应式图片

.responsive-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

3.2 替代文本

<img class="responsive-image" src="image.jpg" alt="描述图片内容">

4. 总结