Question

我需要选择div的所有元素，但是这段代码的最后一个：

<div class="menu">
    <div>
       <a class="link" href="/">link 1</a>
       <div class="subMenu">
           <a class="link" href="/">link 2</a>
           <a class="link" href="/">link 3</a>
           <a class="link" href="/">link 4</a>
       </div>
       <a class="link" href="/">link 5</a>
   </div>
</div>

我已尝试.menu .link:not(:last-child)但link 4被选为最后一个孩子，但我希望最后一个孩子为link 5。我该怎么办？

谢谢你。

Answer 1

注意：

当您的上一个孩子是子菜单时，以下示例也适用。
我认为您的空<div>是一个拼写错误
解决方案使用direct children selector（.parent > .direct-children）

你可以这样做：

＆＃13;

.menu > .link:not(:last-child),
.menu > .subMenu:not(:last-child) .link {
  color: red;
}

＆＃13;

Last is a single link:

<div class="menu">
    <a class="link" href="/">link 1</a>
    <div class="subMenu">
        <a class="link" href="/">link 2</a>
        <a class="link" href="/">link 3</a>
        <a class="link" href="/">link 4</a>
    </div>
    <a class="link" href="/">link 5</a>
</div>

<br />


Last is a submenu:

<div class="menu">
    <a class="link" href="/">link 1</a>
    <a class="link" href="/">link 2</a>
    <div class="subMenu">
        <a class="link" href="/">link 3</a>
        <a class="link" href="/">link 4</a>
        <a class="link" href="/">link 5</a>
    </div>
</div>

＆＃13;

但我建议做相反的事情：

＆＃13;

.menu .link {
  color: red;
}

.menu > :last-child,
.menu > :last-child .link {
  color: blue;
}

＆＃13;

Last is a single link:

<div class="menu">
    <a class="link" href="/">link 1</a>
    <div class="subMenu">
        <a class="link" href="/">link 2</a>
        <a class="link" href="/">link 3</a>
        <a class="link" href="/">link 4</a>
    </div>
    <a class="link" href="/">link 5</a>
</div>

<br />


Last is a submenu:

<div class="menu">
    <a class="link" href="/">link 1</a>
    <a class="link" href="/">link 2</a>
    <div class="subMenu">
        <a class="link" href="/">link 3</a>
        <a class="link" href="/">link 4</a>
        <a class="link" href="/">link 5</a>
    </div>
</div>

＆＃13;

Answer 2

Link4 和 link5 分别是$.fn.owlCarousel = function (options) { return this.each(function () { if ($(this).data("owl-init") === true) { return false; } $(this).data("owl-init", true); var carousel = Object.create(Carousel); carousel.init(options, this); $.data(this, "owlCarousel", carousel); }); };和.submenu的子div的最后一个子项。因此，要仅选择link5，您可以使用.menu选择器来避免选择>中的项目。然后只需将不同的样式应用于link5，而不是选择除link5之外的所有元素：

subMenu

.link {
  color: red;
}

.menu>div>.link:last-child {
  color: blue;
}

Answer 3

这是因为链接4也是:last-child div的:last-of-type或.subMenu。你可以这样做：

＆＃13;

.menu > div > .link:not(:last-of-type),
.subMenu > .link {color:#f00}

＆＃13;

<div class="menu">
  <div>
    <a class="link" href="#">link 1</a>
    <div class="subMenu">
      <a class="link" href="#">link 2</a>
      <a class="link" href="#">link 3</a>
      <a class="link" href="#">link 4</a>
    </div>
    <a class="link" href="#">link 5</a>
  </div>
</div>

＆＃13;

选择除最后一个之外的所有元素

3 个答案: