我想为第一张图片添加特定样式，但我尝试过的所有方法都行不通

Question

正在尝试 select 第一张图片。我试过使用 .flex-project > img:first-child 但它不起作用

<section id="work">
        <h2 class="projects">These are some of my projects</h2>
        <div class="grid-class">
          <div class="flex-project first">
            <a href="#"> <img src="picsforportfolio1/landing.jpg"> </a>
            <p class="project">Landing Page</p>
          </div>
          <div class="flex-project">
            <a href="#"> <img src="picsforportfolio1/survey.jpg"> </a>
            <p class="project">Survey Form</p>
          </div>
          <div class="flex-project">
            <a href="#"> <img src="picsforportfolio1/tribute.jpg"> </a>
            <p class="project">Tribute page</p>
          </div>
          <div class="flex-project">
            <a href="#"> <img src="picsforportfolio1/tingdog.jpg"> </a>`enter code here`
            <p class="project">TingDog</p>
          </div>
        </div>
      </section>

Answer 1

这对我有用：

.flex-project:first-child img

这是输出：

这里是 object-fit 仅应用于第一个 child 的输出：

我想为第一张图片添加特定样式，但我尝试过的所有方法都行不通

I want to add a specific style to the first image but everything I have tried will not work

css

css-selectors