html - 仅使用 CSS 的可能解决方案之前的兄弟选择器

Question

我需要在 css 中使用先前的同级选择器。我知道没有这样的选择器或者它处于 beta 测试中，由于性能和遍历，这是有道理的。

但我想使用其他技巧来实现此目的，但不确定考虑到性能哪个更好。

这是我的 HTML 布局

   <div class="accordion-menu">
        <ul class="accordion-list cd-accordion-menu is-root">
            <li class="accordion-list-item has-children">
                <a class="accordion-list-item__link" href="#0">
                    <span class="accordion-list-item__icon ion-settings"></span>
                    Sub Group 1
                </a>
                <ul class="accordion-list is-opened">
                    <li class="accordion-list-item has-children">
                        <a class="accordion-list-item__link" href="#0">
                            <span class="accordion-list-item__icon fa fa-bars"></span>
                            Sub Group 1.1
                        </a>
                        <ul class="accordion-list">
                            <li class="accordion-list-item">
                                <a class="accordion-list-item__link" href="#0">
                                    <span class="accordion-list-item__icon fa fa-bars"></span>
                                    Item 1
                                </a>
                            </li>
                            <li class="accordion-list-item">
                                <a class="accordion-list-item__link" href="#0">
                                    <span class="accordion-list-item__icon fa fa-bars"></span>
                                    Item 2
                                </a>
                            </li>
                            <li class="accordion-list-item">
                                <a class="accordion-list-item__link" href="#0">
                                    <span class="accordion-list-item__icon fa fa-bars"></span>
                                    Item 3
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="accordion-list-item">
                        <a class="accordion-list-item__link" href="#0">
                            <span class="accordion-list-item__icon fa fa-bars"></span>
                            Item 1
                        </a>
                    </li>
                    <li class="accordion-list-item">
                        <a class="accordion-list-item__link" href="#0">
                            <span class="accordion-list-item__icon fa fa-bars"></span>
                            Item 2
                        </a>
                    </li>
                </ul>
            </li>
            <li class="accordion-list-item">
                <a class="accordion-list-item__link" href="#0">
                    <span class="accordion-list-item__icon fa fa-bars"></span>
                    Sub Group 2
                </a>
            </li>
            <li class="accordion-list-item">
                <a class="accordion-list-item__link" href="#0">
                    <span class="accordion-list-item__icon fa fa-bars"></span>
                    Sub Group 3
                </a>
            </li>
        </ul> <!-- cd-accordion-menu -->
    </div>

这是 CSS 最重要的部分

  .accordion-list-item.has-children > .accordion-list-item__link::before {
    margin-right: 4px;
    content: '\f125';
    font-family: "Ionicons"; }

如果列表项有子项，则此项内的链接应该在其前面有图标(右 V 形)。

但我还有 accordion-list 的另一个状态 is-opened。当 accordion-list with class is-opened 图标之前的链接应该更改为另一个内容 content: '\f123'; (chevron down )

考虑到性能，如何仅使用 css 实现这种行为。我知道使用复选框之类的技巧，但也许还有其他方法可以实现这一目标？

如有任何帮助，我将不胜感激。

更新

为了让事情更清楚。这是我需要选择 sibling 的 HTML 代码的一部分。

  <a class="accordion-list-item__link" href="#0">
  <span class="accordion-list-item__icon ion-settings"></span>
                    Sub Group 1
  </a>
  <ul class="accordion-list is-opened">

如果在示例中 ul 具有类 is-opened 而不是上面的同级链接(在 dom 树中)accordion-list-item__link::before 应该更改图标。

可能的解决方案

我只有一个想法是添加 is-opened 类以在使用 jquery 打开列表时链接自身。

Answer 1

我想你可以试试这个并检查一下。为这两种情况编写 2 个不同的样式

1. ul.accordion-list > .accordion-list-item.has-children > .accordion-list-item__link::before 
{ 
    content: '\f125'; 
}

2. ul.accordion-list.is-opened > .accordion-list-item.has-children > .accordion-list-item__link::before 
{ 
    content: '\f123'; 
}