将样式添加到无序列表的不同部分，wordpress 小部件

Question

我认为描述我的问题的最佳方式是向您展示。

http://yourinternship.hailstormcommerce.com/?page_id=21

在左侧的侧边栏有一个使用ul 的小部件，此时我将bottom-border 应用于第一个li，然后关闭任何子li 的边框。

我的问题是，小部件顶部的“您的实习”边框直到其子菜单完成后才会出现，即在“住宿”上方。但我希望它直接位于“Your Internship”下方，就像其他菜单页面一样。所以基本上它与整个li 接壤。我理解为什么会发生这种情况，我能够绕过它的唯一方法是在ul li a 下方放置一个边框，但问题是这最终会变得非常混乱，用于控制边框的宽度等（使用@ 987654328@等）。

有没有人对我如何为第一个链接应用边框有任何建议？

此外，在同一个注释中，是否可以删除“联系我们”下的最后一个边框？

我在这里问第二个问题，我想我的整体问题与从 wordpress 中设置小部件特定部分的样式有关。

提前感谢您的帮助。任何问题让我知道，因为我可能让这听起来令人困惑。 干杯

Answer 1

这是可能的。我做了一个简化的例子，你可以从中学习：

<ul class="widget">
  <li class="active">Your Internship
    <ul>
      <li>Benefit of our program</li>
      <li>Students</li>
      <li>University</li>
      <li>Why Choose Us</li>
      <li>Your Internship Process</li>
      <li>Your Language Course</li>
    </ul>
  </li>
  <li>Your Accomodation</li>
  <li>Your Employers</li>
  <li>Information for Interns</li>
  <li>Apply Now</li>
  <li>Contact Us</li>
</ul>

要摆脱活动和最后一个项目的边框，请使用以下伪选择器：

.widget > li:last-child, .active {
  border: none;
}

为了在“active”类上重新添加边框，我使用了一个伪元素：

.active:before {
  content: "";
  width: 100%;
  position: absolute;
  top: 25px;
  border-bottom: 2px solid salmon;
}

Demo

Answer 2

这可能比你想要的有点混乱，但这里有一个建议。

要直接在“Your Internship”下方（但仍将其保留在“Your Accomdation”上方），您可以执行以下操作：

#menu-your-internship-sidebar .current_page_parent > a {
    display: block
    border-bottom: solid 1px #DDD;
 }

要删除“联系我们”下的最后一个边框，您只需将 li:last-child 底部边框设置为 0，如下所示：

#menu-your-internship-sidebar li:last-child {
    border: none
}

编辑： 如果您想移除“Your Accomdation”上方的边框：

#menu-your-internship-sidebar > li.current-page-parent {
    border: none;
}