CSS：组合选择器并获取最后一个

Question

我需要得到最后一个以<a>为孩子的李。

<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＆gt;一种）：最后子

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一个小的纯JavaScript函数，用于查找.last类并将其应用于最后一个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>