CSS 选择器，用于在 html 结构不确定时选择父级下的第一个和最后一个元素

Question

我有以下HTML结构。是否可以纯粹通过CSSparent元素下选择第一个和最后一个my-item元素？

my-item元素所在的row可以包装在其他div和(角度(component元素中。此外，component元素可以相互嵌套。这是基于当前页面生成的结构HTML。

在 JavaScript 中，我将通过选择parent下的所有my-item元素作为平面列表并选择其中的第一个和最后一个来实现这一点。

更新：更新HTML模板以使其更类似于我的实际页面内容。

var parentElement = document.querySelector('.parent');
var myItems = parentElement.querySelectorAll('.my-item');
var firstItem = myItems[0];
var lastItem = myItems[myItems.length-1];
firstItem.classList.add('red-background');
lastItem.classList.add('red-background');

.red-background {
background-color: red;
}

<div class="parent">
<person-component>
<div class="template">
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Select me!</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
<div class="row-separator"></div>
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
</div>
</person-component>
<div class="row-separator"></div>
<organization-component>
<div class="template">
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
<div class="row-separator"></div>
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
<div class="row-separator"></div>
<person-component>
<div class="template">
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
</div>
</person-component>
</div>
</organization-component>
<div class="row-separator"></div>
<div class="row">
<row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</row-template>
</div>
<div class="row-separator"></div>
<div class="row">
<row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Select me!</div>
</div>
</row-template>
</div>
</div>

Answer 1

下面的代码可以假设父级的每个子div都有所需的".my-item"，并且每个".my-item"都在".col"内。

它将从".parent"的直接兄弟姐妹中选择第一个和最后一个div，然后尝试找到第一个和最后一个".col"并将规则应用于其中的".my-item"。

.parent > div:last-of-type .col:last-of-type .my-item, 
.parent > div:first-of-type .col:first-of-type .my-item  {
background-color: red;
}

如果不是这样，你真的对html结构一无所知，那么恐怕CSS帮不了你。

Answer 2

假设所有.my-item总是包装在一个.col中，而又被包装在至少另一个div (section)中，并且每个部分只有一个.row(假设取自您的示例(，是的，可以使用纯CSS方法实现您想要的。方法是：

• 选择.parent，因为我们只对在此元素中选择.my-item感兴趣
• 由于所有.my-item总是有一个div容器(无论是具有类section的嵌套容器还是只是在row容器内(，我们可以具体确定哪些包装容器是第一个和最后一个。这些第一个和最后一个容器必须分别是包含第一个和最后一个my-item的容器。
• 由于所有容器只有一个.row.section，因此您可以轻松获得每个.section的第一个和最后一个.col。这意味着要获得第一个.my-item，只需从第一个.section包装器中选择第一个.col并将样式应用于.my-item。同样的逻辑适用于你最后的.my-item。

下面是一个最小的工作示例：

let firstChild = document.querySelector('.parent > div:first-child .col:first-child .my-item')
let lastChild = document.querySelector('.parent > div:last-child .col:last-child .my-item')
console.log(firstChild, lastChild)

.parent > div:first-child .col:first-child .my-item {
background: #000;
color: #FFF;
}
.parent > div:last-child .col:last-child .my-item {
background: red;
color: #FFF;
}

<div class="parent">
<div class="main-section">
<div class="section-wrapper">
<div class="row">
<div class="col">
<div class="my-item">Select me!</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</div>
</div>
</div>
<div class="section-wrapper">
<div class="row">
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Select me!</div>
</div>
</div>
</div>

如前所述，如果上述假设为真，则此代码有效。此代码何时中断的一个简单示例是，当一个类似section的包装器中可能存在两个以上的.row时。