有人可以向我解释一下第一个孩子或第n个孩子是如何工作的吗？

Question

我只想对体验容器内的第一个 div 进行样式设置，但它对体验容器内的所有 div 进行样式设置。如何使用 :first-child 或 :nth-child 来做到这一点？

这是我的代码：

    <article v-for="(item, index) in experiencies" :key="index"
        class="experience-container d-flex flex-column justify-content-start align-items-center w-100 p-3 pt-4 pb-4 rounded-3 ">
        <div class="h-100 d-flex flex-column gap-4">
            <div class="title mt-4">
                <h3 class="mb-0">{{ $t("Experience." + item.company + ".company") }}</h3>
                <p class="mb-0">{{ $t("Experience." + item.company + ".job") }}</p>
                <p class="mb-0 duration">{{ $t("Experience." + item.company + ".duration") }}</p>
            </div>
            <div class="summary w-auto">
                <p class="mb-1">{{ $t("Experience.Experience1.description") }}</p>
                <div class="d-flex flex-wrap gap-2">
                    <span v-for="(element, index) in item.tags" :key="index"
                        class=" tag bg-secondary bg-opacity-50 text-primary rounded-5 text-nowrap">
                        {{ $t("Experience.Experience1.tags[" + element + "]") }}
                    </span>
                </div>
            </div>
        </div>



.experience-container div:first-child {
    width: 65%;
}

Answer 1

:first-child

• 选择：其父元素的第一个子元素。
• 示例：

  ul li:first-child {
    font-weight: bold;
  }
  

  （将每个

  <li>

  内的第一个

  <ul>

  设置为粗体。）

:nth-child(n)

• 选择：其父元素的第n个子元素，其中

  n

  可以是数字、关键字（如

  odd

  或

  even

  ）或公式（如

  3n

  ）。
• 示例：

  p:nth-child(2) {
    color: blue;
  }
  /* Styles the second <p> element */
  
  li:nth-child(odd) {
    background-color: lightgray;
  }
  /* Styles all odd-numbered <li> elements */
  
  div:nth-child(3n) {
    border: 1px solid red;
  }
  /* Styles every third <div> element */
  

这些伪类允许您根据元素在父级中的位置来定位元素。

要使用 CSS 仅对第一个

<div>

内的第一个

.experience-container

进行样式设置：

.experience-container:first-of-type > div:first-child {
    width: 65%;
}

这针对第一个

.experience-container

并将样式专门应用于其第一个

<div>

子级。