Question

我正在尝试使用:last-child以不同方式设置最后一个元素的样式，但我在修改它时遇到问题，因此只计算可见元素。

$(document).ready(function() {
  $(document).on("click", "button", function() {
    $("p:last-child").toggleClass("display-none");
  });
});

p {
  background-color: #ddd;
  padding: 10px;
  border: 1px solid #888;
}

p:last-child {
  border: none;
}

.display-none {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <button>Toggle Display</button>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum justo eget auctor consectetur. Duis mollis posuere enim, sit amet posuere sem tristique et. Fusce nec nulla tincidunt, fermentum quam vel, mattis purus.</p>

  <p>Nulla a est congue, scelerisque turpis vel, egestas urna. Suspendisse ac arcu hendrerit, eleifend lorem sit amet, facilisis erat.</p>

  <p class='display-none'>Praesent vitae quam rhoncus, tincidunt lacus at, sagittis velit. Vivamus lorem purus, congue pellentesque libero vel, molestie ullamcorper risus.</p>
</div>

在这个例子中，我希望最后一段没有边框。当您单击切换显示时，它会在最后一个段落上添加或删除类display-none。如果隐藏了最后一段，我希望它前面的段落能够获得它可见的样式。

我尝试了以下但没有效果：

p:last-child:not(.display-none)
p:not(.display-none):last-child

那么，我如何将两个伪选择器链接起来以便实现我想要发生的事情呢？

Answer 1

你不能。无论:last-child是否可见，last-child-of-class都是最后一个孩子。没有$(document).on("click", "button", function() { $("p:last-child").toggleClass("display-none").prev().toggleClass("no-border"); });（或其反转）。更重要的是，没有办法根据后来兄弟所拥有的类来设置元素的样式。

改变你的方法。使用另一个类隐藏和显示边框，并使用JS在倒数第二个孩子上切换它。

＆＃13;

p {
  background-color: #ddd;
  padding: 10px;
  border: 1px solid #888;
}

.no-border {
  border: none;
}

.display-none {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <button>Toggle Display</button>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum justo eget auctor consectetur. Duis mollis posuere enim, sit amet posuere sem tristique et. Fusce nec nulla tincidunt, fermentum quam vel, mattis purus.</p>

  <p class="no-border">Nulla a est congue, scelerisque turpis vel, egestas urna. Suspendisse ac arcu hendrerit, eleifend lorem sit amet, facilisis erat.</p>

  <p class='display-none no-border'>Praesent vitae quam rhoncus, tincidunt lacus at, sagittis velit. Vivamus lorem purus, congue pellentesque libero vel, molestie ullamcorper risus.</p>
</div>

＆＃13;

class  Weapon
{
  public:
    Weapon(std::string const &name) : _name(name) {}
    virtual void attack() const = 0;
    std::string const &getName() const;
  private:
    std::string const &_name;
};

＆＃13;

链接CSS伪选择器

1 个答案: