html - 如何按特定顺序排列列表中的元素

Question

我的 html 代码元素 3 是定制的分隔线，用于在标题中用 Logo 分隔导航菜单栏。页脚小部件中的相同菜单不应该在那个地方有这个元素。

#menu-footer-menu ul {
  display: flex;
  flex-direction: column;
}

#menu-item-877 ul li:first-child {
  order: 1;
}

#menu-item-139 ul li:nth-child(2) {
  order: 2;
}

li.menu-divider-item:nth-child(3) ul li:nth-child(3) {
  order: 6;
}

#menu-item-140 ul li:nth-child(4) {
  order: 3;
}

#menu-item-880 ul li:nth-child(5) {
  order: 4;
}

#menu-item-881 ul li:nth-child(6) {
  order: 5;
}

<div class="menu-footer-menu-container">
  <ul id="menu-footer-menu" class="menu">
    <li id="menu-item-877" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-877"><a href="link1">Element1</a></li>
    <li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-139"><a href="link2">Element2</a></li>
    <li class="menu-divider-item">
      <a href="link3" rel="home"><img src="Element 3 image path" class="attachment-full size-full" alt="Emojistore" width="80" height="21"></a>
    </li>
    <li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140"><a href="link4">Element4 <span class="cart-count">0</span></a></li>
    <li id="menu-item-880" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-880"><a href="Link5">Element5</a></li>
    <li id="menu-item-881" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-881"><a href="Element6">Element6</a></li>
  </ul>
</div>

当我运行它时，一切都保持不变。如果我不使用选择器选择 List (ul)，一切正常，但 WordPress 主题中的其他列表看起来不应该是这样。

Answer 1

您的 CSS 不正确。请参阅下面的正确版本。

#menu-footer-menu {
  display: flex;
  flex-direction: column;
}

#menu-footer-menu li:nth-child(1) {
  order: 1;
}

#menu-footer-menu li:nth-child(2) {
  order: 2;
}

#menu-footer-menu li:nth-child(3) {
  order: 6;
}

#menu-footer-menu li:nth-child(4) {
  order: 3;
}

#menu-footer-menu li:nth-child(5) {
  order: 4;
}

#menu-footer-menu li:nth-child(6) {
  order: 5;
}

<div class="menu-footer-menu-container">
  <ul id="menu-footer-menu" class="menu">
    <li id="menu-item-877" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-877"><a href="link1">Element1</a></li>
    <li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-139"><a href="link2">Element2</a></li>
    <li class="menu-divider-item">
      <a href="link3" rel="home"><img src="Element 3 image path" class="attachment-full size-full" alt="Emojistore" width="80" height="21"></a>
    </li>
    <li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140"><a href="link4">Element4 <span class="cart-count">0</span></a></li>
    <li id="menu-item-880" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-880"><a href="Link5">Element5</a></li>
    <li id="menu-item-881" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-881"><a href="Element6">Element6</a></li>
  </ul>
</div>