html - 对于 ul 中的每个第一个 li，执行此操作

<分区>

我有以下标记:

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>

我希望没有嵌套 ul 的 li 具有 30px< 的 margin-bottom/。但使用我当前的方法，它也为嵌套的 ul li 元素添加了边距。

我几乎需要做 ul li:first-child:not(.sub-menu li) 但那是不可能的。解决方法是什么？

最佳答案

如果您不能编辑 html 并且不需要它是动态的，这应该可以工作

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

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

或

如果你需要它是动态的，你可以使用 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
    }

})

关于html - 对于 ul 中的每个第一个 li，执行此操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57111675/

上一篇：javascript - 如何将特定索引的数组分配给另一个嵌套数组？

下一篇：javascript - 将 localStorage 数据更改为 jQuery 中的 html 列表标记

html - CSS边距: 0 auto; not working in Safari Browser

php - Bootstrap 模态不会显示

javascript - 在 JS 和 CSS 中保持文本恰好为 N 行

css - 如何使用CSS重定向？

javascript - 如何使用javascript更改选择框的禁用样式

html - 如何在html中隐藏文本框

javascript - 如何在 Jquery 对话框中设置内容

html - 定位搜索分区

css - 全宽行和周围的容器