顯示：無/顯示：塊與組合的兄弟選擇器

Question

我想使class =「category-nav」的子菜單隻對「顏色」選項有效（所以它不應該存在或顯示任何的其他選擇）。

顯示：無效，但當我嘗試使用組合的兄弟選擇器來指定顯示子菜單隻顯示選項「顏色」它不起作用的顯示塊。 （.add-nav #color〜.category-nav {display：block}）。我究竟做錯了什麼？有沒有另一種方法來做到這一點與CSS？我不希望爲此使用JavaScript，因爲頁面已經是JavaScript了。

<ul class="add-nav"> 
          <li><a href="#">shape</a></li> 
          <li id = "color" class="active"><a href="#">color</a></li> 
          <li><a href="#">pattern</a></li> 
          <li><a href="#">size</a></li> 
          <li><a href="#">overall</a></li> 
</ul> 
         <ul class="category-nav"> 
          <li class="active"><a href="#">all</a></li> 
          <li><a href="#">Red</a></li> 
          <li><a href="#">Orange</a></li> 
          <li><a href="#">Yellow</a></li> 
          <li><a href="#">Green</a></li> 
          <li><a href="#">Blue</a></li> 
          <li><a href="#">Purple</a></li> 
         </ul> 

這裏的CSS

.add-nav{ 
    width:100%; 
    padding:0; 
    margin:10px 0 0px; 
    list-style:none; 
    border-bottom:1px solid #cecece; 
    display:table; 
    text-transform:uppercase; 
    font-size:10px; 
    line-height:14px; 
} 
.add-nav li{ 
    text-align:center; 
    display:table-cell; 
    vertical-align:bottom; 
} 
.add-nav li a{ 
    display:block; 
    padding:21px 5px 16px; 
    color:#636363; 
} 
.add-nav li a:hover, 
.add-nav .active a{ 
    font-weight:700; 
    text-decoration:none; 
    color:#272727; 
    background:#f2f2f2; 
} 
.category-nav{ 
    padding:5px 13px 7px; 
    margin:0 0 0px; 
    list-style:none; 
    background:#f2f2f2; 
    width:100%; 
    font-size:10px; 
    font-variant:small-caps; 
    display:table; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
} 
.category-nav li{ 
    text-align:center; 
    display:table-cell; 
    vertical-align:bottom; 
} 
.category-nav li a{color:#636363;} 
.category-nav li a:hover{ 
     text-decoration:none; 
    color:#ff6699; 
} 
\\.category-nav{ 
     display:none;\\ 
} 
.category-nav .active a{ 
    color:#ff6699; 
    font-weight:700; 
} 

這裏是JS Fiddle

Answer 1

的代碼，你在找什麼是CSS選擇器父母，這doesn't exist。

您的代碼表示：

.add-nav li.active #color ~ .category-nav  // I added the .active class 

什麼這實際上做的是選擇符合.category-nav是的#color所有的兄弟姐妹。現在，.category-nav不是#color的兄弟姐妹;這是一個.add-nav的兄弟姐妹。你真的想要做的是選擇.add-nav的兄弟姐妹...但只有當它包含li.active #color。換句話說，你想定義一些東西，然後選擇，而不是東西本身，但它的父母。這是不可能的，並且爲什麼不允許here有一個有趣的討論。基本上，這種類型的東西會在瀏覽器中引入巨大的性能問題。

但是，您已經必須使用一些Javascript來將active類應用到.add-nav中的每個<li>單擊時。它只會有幾行代碼來檢查點擊哪個鏈接，並基於此顯示/隱藏你的.category-nav。這是我認爲最好的方式。