Question

我正试图找到一种方法来选择#inner3 ...

 <div id="outer">
      <div id="inner1"> </div>
      <div id="inner2"> </div>
      <div id="inner3"> of interest </div>
      <div id="inner4"> </div>
 </div>

...从最后一次计算（#inner4），因为有时#2不存在...

 <div id="outer">
      <div id="inner1"> </div>
      <div id="inner2"> of interest </div>
      <div id="inner3"> </div>
 </div>

并且只有3个项目（因此#inner3变为#inner2）。

注意，#id是为了清楚起见，并没有真正出现在我的工作中。

我现在正在使用body > .. > div:nth-child(3)，但如上所述，从顶部算起是一个问题。

对此有任何解决方案吗？

Answer 1

你应该能够用

抓住你的元素

 documentObject.lastChild.previousSibling

其中documentObject是您的parent。

修改

感谢大卫·托马斯：更准确的是previousElementSibling，因为它返回的是元素，而不是文本节点：

documentObject.lastChild.previousElementSibling

来源：
W3Schools
developers.mozilla

Answer 2

如果我理解正确，你可以从:nth-last-child()开始计算：

.outer *:nth-last-child(2){
  color: green;
}

Answer 3

文本节点在 lastChild 和 previousSibling 中都可能有问题这对我有用：

documentObject.lastElementChild.previousElementSibling

在此处找到解决方案的另一部分：https://stackoverflow.com/a/18341945/8486854

没有jquery的第二个孩子

3 个答案:

修改