Question

给定一些css选择器，它返回文档中的一组匹配元素。在css中是否有任何方法可以获取结果集并定位第n个结果？

nth-of-type和nth-child伪类对我的理解不起作用，因为它们不会将所有可能的匹配视为线性列表。如：

<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个元素的线性列表，并将它们中的一个独立于文档中的位置。

Answer 1

我不认为这是可能的，正如你所描述的那样。 CSS的一般规则是查询可以深入研究，有时候它们可以横向移动＆＃34;沿着树通过一组邻居（并且就此而言，仅在一个方向上），但是他们永远不能从一个节点获取信息，向上遍历，进入邻居，并将该信息应用于另一个节点。一个例子：

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

该HTML中的注释是一个空间，无论出于什么意图和目的，都是＆＃34;隐形＆＃34;到myCssTarget。如果我在里面添加任何HTML，那么它永远不会直接影响外部的跨度。

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

Answer 2

我刚刚看到了一些问题的澄清。这是一个更简单的小提琴，可以通过＆＃34; aClass＆＃34;进入一个列表，让你定位nTh跨度。仍然使用Jquery而不是CSS。

https://jsfiddle.net/h2e0xgwf/6/

$(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");



 });

Answer 3

我知道在CSS中没有办法做到这一点。您可以使用JavaScript

选择给定类名的第n个元素

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

或使用jQuery

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

Answer 4

如果我理解正确，你想要一个包含class =“aClass”的所有跨度的线性列表，它们是div的直接子节点。

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

然后你希望改变所有n个孩子的风格;例如，更改第一个风格会导致2/3跨度受到影响：两个直接位于新div之下。如果你要改变第二个孩子，只会影响1/3跨度。

如果这就是你要找的东西，我不相信它可以在CSS中完成，但它可以在JQuery中完成。为了防止我对你的问题的理解是正确的，我创造了一个小例子。

https://jsfiddle.net/h2e0xgwf/4/

$(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");
    }
  }
}


});

你能否在css选择器的结果中定位一个独立于它的位置的特定元素？还是关系？

4 个答案: