Question

我们有一个左导航，我试图调整一点点。请不要批评HTML的有效性，我们有一个CMS和外部开发人员正在推动这项工作，坦白说它现在可以使用。

我想要做的是将样式应用于<DIV>之后的<DIV class="nav_selected">，我只想将它们缩进padding-left:30px;

多数民众赞成，但我尝试的所有内容都适用于“ nav_selected ”div，这也是我不想要的。它是一种标题，其下的div就是孩子。

<div class="left_nav_2">
 <div class="left_nav_2_container">
  <ul class="no_bottom_border">
   <div class="nav_selected"><li><h2><a href="#">Link 1 Selected</a></h2></li></div>
   <div><li><a href="#">Link 2</a></li></div>
   <div><li><a href="#">Link 3</a></li></div>
  </ul>
 </div>
</div>

Answer 1

您可以尝试为第一行创建一个类，然后使用否定伪类来使用它。

   :not(/*put all the classes in your css document here.*/){ /* put the css you want for it here.*/}

Answer 2

这样的事情也可以起作用：

CSS

.no_bottom_border li{
  padding-left: 30px;
}

.no_bottom_border .nav_selected li{
  padding-left: 0px;
  // or just the opposite values of the .no_bottom_border li
}

是这样的吗？

Answer 3

好的，你可以用这个：

ul.no_bottom_border > div:not(:first-child) {
    padding-left: 30px;
}

希望有所帮助

Answer 4

Here it is which you want

向两个div添加padding-left，如

.no_bottom_border li{
   padding-left: 30px;
}

.nav_selected li{
   padding-left: 0px;
}

将样式应用于DIV，除了第一行

4 个答案: