Html 你能在css选择器的结果中定位一个特定的元素而不依赖于它的位置吗？还是关系？

给定从文档返回一组匹配元素的css选择器。css中是否有任何方法可以获取结果集并以第n个结果为目标

根据我的理解，第n个类型和第n个子伪类将不起作用，因为它们不会将所有可能的匹配都视为线性列表。例如：

<div>
  <span class="aClass" /> <!-- found by :nth-of-type(1) -->
  <span class="aClass" /> <!-- found by:nth-of-type(2) -->
  <div>
    <span class="aClass" /> <!-- found by :nth-of-type(1) -->
</div>

---

我希望能够将所有这些事件视为3个元素的线性列表，并将其中一个元素作为目标，而不考虑它们在文档中的位置。

我认为这不可能如您所述。CSS的一般规则是，查询可以更深入地挖掘，有时它们可以沿着树的一组邻居向一侧移动，而且只能向一个方向移动，但它们永远不能从一个节点获取信息，向上遍历，进入邻居，并将该信息应用到另一个节点。例如：

<div>
  <div class="relevant">
    <!-- *whistles spookily* - "Zis WILL be the last time you see me!" -->
  </div>
  <span class="myCssTarget"></span>
</div>

HTML中的注释是一个空间，无论出于何种目的，myCssTarget都不可见。如果我在其中添加了任何HTML，那么它永远不会直接影响外部的跨度

---

如果您提供一个特定的情况，我可以提供进一步的建议，但这可能是要求重新设计您正在安装的组件，或者可能是基于JavaScript的解决方案。

我知道在CSS中无法做到这一点。您可以使用JavaScript选择给定类名的第n个元素

var elem = getElementsByClassName('.aClass').item(n-1)

或者使用jQuery

var elem = $('.aClass').toArray().filter(function(elem, i){
    return i==(n-1);
})[0];

---

如果我理解正确，您需要一个包含class=aClass的所有跨度的线性列表，这些跨度是div的直接子级

这意味着在您的示例中，您将有2个跨度列表，第一个列表将有2个元素，第二个列表将有1个元素

然后，您希望更改所有n个孩子的样式；例如，更改“第一个”的样式会导致2/3跨距受到影响：两个跨距直接位于新div下。如果要更改第二个子项，则只有1/3跨距会受到影响

如果这就是你想要的，我不相信它可以在CSS中完成，但它可以在JQuery中完成。我随便举了个例子，以防万一我对你问题的理解是正确的

---

我刚刚看到对这个问题的一些澄清。下面是一个更简单的方法，可以将所有带有aClass的跨距放入一个列表中，让您以第n个跨距为目标。仍然使用Jquery而不是CSS

---

因此，您希望能够获取第三个元素，而不管它是父元素的直系后代还是孙子后代？是这样吗？是的。如果它是在文档中找到的第三个跨度，我希望能够可靠地获得它，作为集合中的第三个节点。您正在查找不存在的第n个类…即使它存在，也无法在DOM元素之间工作。你需要JS…这就是它的用途。我们可以用不同的方式帮助你解决问题吗？为什么您希望通过元素在选择器集中的索引，而不是通过自然地遍历DOM，来确定元素的目标呢？

$(document).ready(function(){
var nTh = 3;  // change this to whichever N you wish
var rowsOfSpans = new Array();
var divsWithChildren = $("div:parent");
for(var i = 0; i < divsWithChildren.length; i++){
  rowsOfSpans[i] = $(divsWithChildren[i]).children("span.aClass");
}

for(var i = 0; i < rowsOfSpans.length; i ++){
  for(var j =0; j < rowsOfSpans[i].length; j++){
      if(j == nTh-1){
      // THIS IS THE NTH ELEMENT
      $(rowsOfSpans[i][j]).html($(rowsOfSpans[i][j]).html() + " : found the " + nTh + "th element").css("background-color", "blue").css("color","white");
    }
  }
}


});

$(document).ready(function(){
var nTh = 5;  // change this to whichever N you wish
var allSpans = $("div > span.aClass");
$(allSpans[nTh-1]).html($(allSpans[nTh-1]).html() + " : found the " + nTh + "th element").css("background-color", "blue").css("color","white");



 });