CSS之前的兄弟姐妹選擇可能的解決方案只有

我需要以前的兄弟選擇在CSS。我知道沒有這樣的選擇器，或者它正在進行beta測試，因爲性能和遍歷，這是有道理的。CSS之前的兄弟姐妹選擇可能的解決方案只有

但我想用其他技巧來實現這一點，但不確定考慮性能哪個更好。

這裏是我的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"; }

如果列表項有孩子比這個項目裏面鏈接應該有圖標（雪佛龍右）。

但我有accordion-list的另一個州is-opened。並且當accordion-list與is-opened之間的鏈接圖標應改爲另一個內容content: '\f123';（雪佛龍向下）

如何才能實現這種行爲只使用CSS，考慮性能。我知道使用複選框的技巧，但也許有其他方法來實現這一點？

我將不勝感激任何幫助。

UPDATE

爲了讓事情更加清楚。這是我需要選擇兄弟的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打開列表時本身聯繫起來。

來源

2016-09-01 CROSP

使用此代碼，這意味着如果.accordion列表項既有類有子女，並開那麼這個CSS將被應用

編輯：

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

來源

2016-09-01 05:34:15

請注意'是-opened'是列表不是項目 – CROSP

您選擇打開的列表的直接子類，但我需要選擇的兄弟姐妹，請參閱我的更新。 – CROSP

我想你可以試試這個並檢查。寫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'; 
}

來源

2016-09-01 05:42:24 NewBeeee

在你的例子中，它將選擇打開列表中的項目，但我需要選擇兄弟 – CROSP

CSS之前的兄弟姐妹選擇可能的解決方案只有

回答

相關問題