Question

我需要css中的前一个兄弟选择器。我知道没有这样的选择器，或者它处于beta测试阶段，因为性能和遍历，这是有道理的。

但是我想用其他技巧来达到这个目的，但不确定考虑性能哪个更好。

这是我的HTML布局

$REPLY

这是CSS最重要的部分

   <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>

如果列表项目中包含子项而非此项目中的链接，则该项目前面应该有图标（雪佛龙右侧）。

但我有.accordion-list-item.has-children > .accordion-list-item__link::before { margin-right: 4px; content: '\f125'; font-family: "Ionicons"; }的另一个州is-opened。如果accordion-list与accordion-list之前的链接在图标之前应该更改为另一个内容is-opened（雪佛龙向下）

考虑到性能，如何仅使用css实现此类行为。我知道使用复选框的技巧，但也许有其他方法来实现这一点？

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

更新

使事情更清楚。这是我需要选择兄弟姐妹的HTML代码的一部分。

content: '\f123';

如果如示例中的ul具有类<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">而不是上面的兄弟链接（在dom树中）is-opened应该更改图标。

可能的解决方案

我只有一个想法是在使用jquery打开列表时添加accordion-list-item__link::before类来链接自己。

Answer 1

使用此代码意味着如果.accordion-list-item同时具有类has-children并且已打开，那么将应用此css

修改

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

Answer 2

我想你可以尝试一下并检查一下。为两种情况写下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'; 
}

仅在使用CSS的可能解决方案之前同级选择器

2 个答案: