先進的CSS：目標最後一個鄰接兄弟

我試圖在一個情況下，我不知道會有多少兄弟姐妹（1到6）的最後一個鄰接兄弟姐妹。看到這個普拉克：http://plnkr.co/edit/JBsMUg2yl1JkbK6j8Bfj?p=preview 先進的CSS：目標最後一個鄰接兄弟

<section> 
    <div class="c">Category 1</div> 
    <div class="c">Category 2</div> 
    <div class="p">product</div> 
    <div class="p">product</div> 
    <div class="p">product</div> 
    <div class="c">Category 3</div> 
    <div class="p">product</div> 
    <div class="p">product</div> 
    <div class="c">Category 4</div> 
    <div class="c">Category 5</div> 
    <div class="p">product</div> 
    <div class="p">product</div> 
    <div class="p">product</div> 
    <div class="c">Category 6</div> 
    <div class="c">Category 7</div> 
    <div class="c">Category 8</div> 
    <div class="p">product</div> 
    <div class="c">Category 9</div> 
    </section>

我盡了最大努力仍然給我留下了這個失蹤：3類應該被選擇;不應選擇類別7。

div { 
    padding: 5px; 
    margin-bottom: 5px; 
} 

.c { 
    color: yellow; 
    background: blue; 
    opacity:.1; 
} 
.c+.c { 
    opacity:1; 
} 
.p+.c { 
    color: yellow; 
    background: blue; 
} 

.c:last-child { /* orphan cat on end of list */ 
    opacity:.1; 
}

我不能輕易改變我的html，也不能在最後一個相鄰的兄弟姐妹上放一節課。

背景：這是一個通過在包含類別標題和產品之後的平面數組上的角度ng-repeat呈現的目錄。 ng-repeat使用文本過濾器（來自搜索框）忽略類別標題（否則它們可能全部被隱藏）並且僅適用於產品。因此，我最終的情況是我有空的類別標題，我想通過CSS刪除（但歡迎其他建議）

來源

2014-10-02 yar1

你需要JS來做這件事。 CSS不能使用僞類來僅由** class **選擇元素。 – 2014-10-02 18:13:14

我不明白的選擇模式... – LcSalazar 2014-10-02 18:13:24

我想你應該使用嵌套有序列表（'

'）這一點。 – Blazemonger 2014-10-02 18:21:32

我改變了HTML代碼，並使用標題屬性以及CSS可見性屬性。這是我現在可以想象的唯一解決方案。

.c { 
 
    visibility: hidden; 
 
} 
 
.c ul { 
 
    visibility: visible; 
 
} 
 
.c ul:before { 
 
    content: attr(title); 
 
}

<ul> 
 
    <li class="c"> 
 
    Category 1 
 
    </li> 
 
    <li class="c"> 
 
    Category 2 
 
    <ul title="Category 2"> 
 
     <li class="p">product</li> 
 
     <li class="p">product</li> 
 
     <li class="p">product</li> 
 
    </ul> 
 
    </li> 
 
    <li class="c"> 
 
    Category 3 
 
    <ul title="Category 3"> 
 
     <li class="p">product</li> 
 
     <li class="p">product</li> 
 
    </ul> 
 
    </li> 
 
    <li class="c"> 
 
    Category 4 
 
    </li> 
 
    <li class="c"> 
 
    Category 5 
 
    <ul title="Category 5"> 
 
     <li class="p">product</li> 
 
     <li class="p">product</li> 
 
     <li class="p">product</li> 
 
    </ul> 
 
    </li> 
 
    <li class="c"> 
 
    Category 6 
 
    </li> 
 
    <li class="c"> 
 
    Category 7 
 
    </li> 
 
    <li class="c"> 
 
    Category 8 
 
    <ul title="Category 8"> 
 
     <li class="p">product</li> 
 
    </ul> 
 
    </li> 
 
    <li class="c"> 
 
    Category 9 
 
    </li> 
 
</ul>

來源

2014-10-02 18:58:08 malteriechmann

這是如何解決問題的？例如，你會如何隱藏類別4，其唯一的唯一性是空的？在今天的CSS中沒有父選擇器... – yar1 2014-10-02 21:20:38

BTW：我的html是完全有效的。你可能會認爲它不是語義的，但對我的用例來說可以。 – yar1 2014-10-03 07:20:33

當然，我的意思是語義。 – malteriechmann 2014-10-03 09:51:11

的解決方案如下所示：http://plnkr.co/edit/6DUHUEHC9j5mONGG1z0N?p=preview會盡量努力，創建視覺效果，我需要。

它使用單獨的<ul>爲每個類別和:only-child僞選擇器。

但是，它實際上不是一個可接受的問題的答案，因爲它需要更改不希望的html。我認爲應該仍然有一個解決方案，使用第n個孩子/最後一個孩子/不是（）等組合的單元列表，但還沒有找到它。

來源

2014-10-03 07:19:14 yar1

先進的CSS：目標最後一個鄰接兄弟

回答

相關問題