当子元素属性aria扩展为真时，向父元素添加class

Question

当下拉菜单打开时，我需要给第一个 div 一个灰色背景。 我已经能够应用 css 取决于 a 标签的 aria-expanding 子元素，但我不知道如何为父元素做到这一点。 我正在使用 Vue，所以我不想使用任何 Jquery。

            <li v-for="(item, index) in locations" :key="index">
              <div id="active-hov-div">
                <a
                  id="brand-nav-item-link-id"
                  class="brand-nav-item-link"
                  type="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                >
                  <label class="active-hov">
                    {{item.label}}
                  </label>
                    <i class="fa fa-sort-down test-down"></i>
                    <i class="fa fa-sort-up test-up"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-end locations-ul">
                  <li class="locations-li">
                    <FindACommunity />
                  </li>
                  <ul class="locations-dropdown-ul">
                  <li v-for="(item3, index3) in item.locationsTitles" :key="index3" class="nav-item" style="padding-bottom: 8px">
                    <a class="brand-nav-dropdown-link" :href="item3.url">{{item3.title}}</a>
                  </li>
                  </ul>
                </div>
              </div>
            </li>

Answer 1

你试过:first-child吗？

https://www.w3schools.com/cssref/sel_firstchild.asp

Answer 2

可能您可以使用v-for中的index并在 styles 中定义gray-bg ，然后使用index === 0来决定是否需要显示灰色背景，我希望它对你有用

<template>
<!-- ... -->
    <li v-for="(item, index) in locations" :key="index">
        <div id="active-hov-div" :class="{'gray-bg':index === 0}">
            <a
                id="brand-nav-item-link-id"
                class="brand-nav-item-link"
                type="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
            >
                <label class="active-hov">
                    {{item.label}}
                </label>
                <i class="fa fa-sort-down test-down"></i>
                <i class="fa fa-sort-up test-up"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-end locations-ul">
    <li class="locations-li">
        <FindACommunity />
    </li>
    <ul class="locations-dropdown-ul">
        <li v-for="(item3, index3) in item.locationsTitles" :key="index3" class="nav-item" style="padding-bottom: 8px">
            <a class="brand-nav-dropdown-link" :href="item3.url">{{item3.title}}</a>
        </li>
    </ul>
    </div>
    </div>
    </li>
<!-- ... -->
</template>

<style>
/*...*/
 .gray-bg {
     background-color: gray;
 }
/*...*/
</style>