Question

我的html代码Element 3是定制的分隔符，用于以徽标分隔标题中的导航菜单栏。页脚小部件中的相同菜单不应在该位置上包含此元素。

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

运行此命令时，一切保持不变。如果我不选择带选择器的列表（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>

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

1 个答案: