修改

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>的直接子代。而是使用类：

＆＃13;

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

＆＃13;

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

＆＃13;

此外，值不是列表项的有效属性。而是使用data-*属性。

修改

重读你的问题让我很奇怪。您是否想在列表中创建子列表？那你可能想试试这个：

＆＃13;

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

＆＃13;

Answer 2

使用＆＃39;＆gt;＆＃39;在选择器中。它只需要在下一级别而不是更深层次的元素。

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

但更好的解决方案就是为应该有填充而不使用跨度来分隔这些元素的元素创建一个类。

如何选择每个li元素而不是跨越那些元素

2 个答案:

修改