使用 CSS 从相似元素组中选择第一个和最后一个元素

Question

我有这个CSS

div {
  width: 300px;
  text-align: center;
}
p:not(.vrt) {
  text-align: left;
}
p.vrt {
  writing-mode: vertical-rl; 
  display: inline-block;
}
div :nth-child(1 of p.vrt) {
  margin-left: 0;
}
div :nth-last-child(1 of p.vrt) {
  margin-right: 0;
}

对于此 HTML

  <div>
    <p>This is some sample text which is not meant to be read.</p>
    <p class="vrt">幾見本言葉</p>
    <p class="vrt">幾見本言葉</p>
    <p class="vrt">幾見本言葉</p>
    <p>This is some sample text which is not meant to be read.</p>
    <p class="vrt">幾見本言葉</p>
  </div>

p 和 p.vrt 元素的数量可能会有所不同。例如，多组 5 个或更多连续的 p.vrt 元素可能没有，只有一个。

我需要做的是 CSS 仅选择第一个 p.vrt 元素（在一组 p.vrt 元素中），另一个仅选择最后一个 p.vrt 元素（在一组 p.vrt 元素中）。 ）目前我的 CSS 选择第一个和最后一个元素。在上面的示例中，“第一个”CSS 将选择第 1 个和第 4 个 p.vrt，“最后一个”CSS 将选择第 3 个 p.vrt 和第 4 个 p.vrt。

Answer 1

您已经非常接近解决您的问题了。我唯一改变的部分是以下部分。

来自：

div :nth-child(1 of p.vrt) {
  margin-left: 0;
}
div :nth-last-child(1 of p.vrt) {
  margin-right: 0;
}

致：

div :nth-child(1 of .vrt) {
  margin-left: 0;
}
div :nth-last-child(1 of .vrt) {
  margin-right: 0;
}

我希望这是您所期望看到的。我还添加了一些颜色来区分选择。您当然可以根据个人情况将其删除。

div {
  width: 300px;
  text-align: center;
}

p:not(.vrt) {
  text-align: left;
}

p.vrt {
  writing-mode: vertical-rl; 
  display: inline-block;
}

div :nth-child(1 of .vrt) {
  margin-left: 0;
  color: #F0A;
}
div :nth-last-child(1 of .vrt) {
  margin-right: 0;
  color: #FA0;
}

  <div>
    <p>This is some sample text which is not meant to be read.</p>
    <p class="vrt">幾見本言葉</p>
    <p class="vrt">幾見本言葉</p>
    <p class="vrt">幾見本言葉</p>
    <p>This is some sample text which is not meant to be read.</p>
    <p class="vrt">幾見本言葉</p>
  </div>