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

Question

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

row 其中 my-item 元素可以包装在其他 div 和(Angular)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 无法帮助您..