Question

我有以下标记：

ul {
  list-style-type: none;
}

ul:not(.sub-menu) {
  padding: 0px;
}

ul li {
  padding-top: 10px;
}

ul li:first-child:not(.sub-menu) {
  margin-bottom: 30px;
}

.submenu {
  margin-left: 20px;
}

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>has submenu
    <ul class="submenu">
      <li>child</li>
      <li>child</li>
    </ul>
  </li>
</ul>

我希望没有嵌套li的{{1}}的{{1}}为ul。但是使用我目前的方法，它也为嵌套的margin-bottom元素添加了空白。

我几乎需要做30px，但这是不可能的。解决方法是什么？

Answer 1

如果您无法编辑html并且不需要它是动态的，则此方法应该有效

ul > li:not(:nth-of-type(4)){
    margin-bottom: 30px;
}

我选择了父级li的所有直接子级ul元素，除了第4个元素

OR

如果您需要它是动态的，则可以使用jQuery

$('ul li').each(function(){ // cycle through each li

    if(!$(this).parent().hasClass('submenu')){ // check if parent doesn't have class 'submenu'

        $(this).css('padding-bottom','30px'); // if not, add padding
    }

})

对于ul中的第一个li，请执行此操作

1 个答案: