Question

我想选择最后一个<p>，但前提是下一个兄弟不 <ul>

<!-- Select this p element -->
<div>
    <p>...</p>
    <img>
</div>

<!-- Do NOT this p element -->
<div>
    <p>...</p>
    <ul>...</ul>
</div>

这不起作用：

<style>
    div p:last-of-type, div p:not(+ul) {
    ...
}
</style>

Answer 1

根据我的理解，没有办法只使用CSS选择这样的选择器。您应该需要一些脚本来完成它。检查下面的代码片段，它有助于简单的jquery。

$(document).ready(function() {
  $('p').each(function() {
    if (!$(this).next().is('ul')) {
      $(this).addClass('color-red');
    }
  });
});

.color-red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Some text</p>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>
<div>
  <p>Some text</p>
  <span>Some more text</span>
</div>

Answer 2

<div class="all">
<div>
    <p>1sst</p>
    <img>
</div>

<!-- Do NOT this p element -->
<div>
    <p>last p</p>
    <ul>...</ul>
</div>
</div>
<script>
$('.all div').children('p').last()
</script>

Answer 3

使用纯CSS无法做到这一点，如果您真的必须选择下一个兄弟<ul>，那么您将不得不使用Javascript。

CSS选择最后一段，不遵循无序列表

3 个答案: