CSS:组合选择器并获得最后一个

Question

我需要得到最后一个有 <a> 的 li作为 child 。

<li> test A </li>
<li> <a> test B</a> </li>
<li> test C </li>
<li> <a> test D</a> I want to select this one!</li>
<li> test E </li>
<li> test F </li>

我需要这样的东西:

(li>a):最后一个 child

li {
  background: #babaca;
  border: 1px solid #E4E4E4;
}
li > a {
  background: green;
}

(li>a):last-child {
  background: red;
}

li:last-child{
  background: yellow;
}

<li> test A </li>
<li> <a> test B</a> </li>
<li> test C </li>
<li> <a> test D</a> I want to select this one!</li> 
<li> test E </li>
<li> test F </li>

有什么想法吗？

Answer 1

正如其他人所评论的那样，此时使用 CSS 是不可能的。 :has伪类选择器可能会提供一种方法。

同时，这里有几个选项:

#1 使用jQuery's :has selector

$("li:has(a):last").addClass("last");

li {
  background: #babaca;
  border: 1px solid #E4E4E4;
}

li > a {
  background: green;
}

li.last {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="list">
  <li> test A </li>
  <li> <a> test B</a> </li>
  <li> test C </li>
  <li> <a> test D</a> I want to select this one!</li>
  <li> test E </li>
  <li> test F </li>
</ul>

#2 用于查找和应用 .last 的小型纯 JavaScript 函数到最后一节课li > a元素。

函数findLastA()接受一个目标为 ul 的选择器元素，然后找到最后一个 li包含 a元素，并应用 .last给它上课。

请记住，这是专门针对问题中概述的 HTML 结构制作的。

function findLastA(el) {
  var listItems = Array.from(document.querySelectorAll(el + " > li"));
  for (let i = listItems.length - 1; i >= 0; i--) {
    let childNodes = listItems[i].children;
    if (childNodes.length && childNodes[0].tagName === "A") {
      listItems[i].classList.add("last")
      break;
    }
  }
}

// Call the function
findLastA("#list");

li {
  background: #babaca;
  border: 1px solid #E4E4E4;
}

li > a {
  background: green;
}

li.last {
  background: red;
}

<ul id="list">
  <li> test A </li>
  <li> <a> test B</a> </li>
  <li> test C </li>
  <li> <a> test D</a> I want to select this one!</li>
  <li> test E </li>
  <li> test F </li>
</ul>