如何在跨度選擇每一個li元素而不是那些

Question

很多要說它的一個簡單的問題，但奇怪的是我碰到困難就可以了。 看一看這裏：JsFiddle

我們有什麼感興趣的這部分代碼：

<div class="customSelect"> 
    <ul> 
    <li class="title not"> Top Villes de départ</li> 
    <span class="topDes"> 
    <li id="test" value="PAR"> Paris</li> 
    <li value="LYS"> Lyon</li> 
    <li value="NTE"> Nantes</li> 
    </span> 
    <li class="separ not" value=""></li> 
    <li class="title not" value="0">Toute les villes de départ</li> 
    </ul> 
</div> 

.customSelect li:not(.topDes){ 
    padding-left:5px; 
} 

我想申請一個padding-left : 5px每<li>元素，但不是那些<span class=".topDes">標籤之間。

我試過.customSelect:not(.topDes) li{...}等組合，但我沒有看到任何變化。

什麼是這樣做的最佳方式？

Answer 1

你的代碼是無效的，你不能有一個<span>爲您<ul>的直接孩子。而是使用類：

li:not(.topDes) { 
 
    padding-left: 5px; 
 
}

<div class="customSelect"> 
 
    <ul> 
 
    <li class="title not"> Top Villes de départ</li> 
 
    <li class="topDes" id="test" value="PAR"> Paris</li> 
 
    <li class="topDes" value="LYS"> Lyon</li> 
 
    <li class="topDes" value="NTE"> Nantes</li> 
 
    <li class="separ not" value=""></li> 
 
    <li class="title not" value="0">Toute les villes de départ</li> 
 
    </ul> 
 
</div>

而且，值不是一個列表項有效的屬性。而是使用data-*屬性。

編輯

重新讀你的問題讓我感到奇怪。你想在列表中創建一個子列表嗎？然後，你可能想試試這個：

<div class="customSelect"> 
 
    <ul> 
 
    <li class="title not"> Top Villes de départ 
 
     <ul> 
 
     <li id="test" value="PAR"> Paris</li> 
 
     <li value="LYS"> Lyon</li> 
 
     <li value="NTE"> Nantes</li> 
 
     </ul> 
 
    </li> 
 
    <li class="separ not" value=""></li> 
 
    <li class="title not" value="0">Toute les villes de départ</li> 
 
    </ul> 
 
</div>

Answer 2

在選擇使用 '>'。它只需要下一層的元素，而不是更深。

.customSelect ul > li { 
    padding-left: 5px; 
} 

但更好的解決方案是創建一個類應該有填充和不使用跨度分隔這些元素的元素。