您可以针对独立于其位置的CSS选择器的结果中的特定元素吗？或关系？

给定一些从文档中返回一组匹配元素的CSS选择器。在CSS中有没有办法取得结果集和目标的第n个结果？您可以针对独立于其位置的CSS选择器的结果中的特定元素吗？或关系？

nth-type和n-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种元素的线性表，并独立的在文档中它们可能位于目标其中之一。

来源

2016-02-18 Julian Cleary

所以，你希望能够拿到第三''不管它是直接后裔或父元素孙子后裔？那是对的吗？ – JakeParis

是的。如果它是在文档中找到的第三个跨度，我希望能够可靠地获取它作为集合中的第三个节点。 –

您正在寻找不存在的“n类”...即使它它在* DOM元素之间不会工作。你需要JS ......就是这样。 –

我只看到一些澄清的问题。这里有一个简单得多的提琴，可以将所有带有“aClass”的跨度放到一个列表中，让您可以定位第n个跨度。仍然使用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"); 



});

来源

2016-02-18 20:31:01 aemorales1

我不认为这是可能的，因为你描述它。 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的解决方案。

来源

2016-02-18 19:08:54 Katana314

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

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

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

或使用jQuery

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

来源

2016-02-18 19:12:06 user196249

如果我理解你正确，您希望是具有类所有跨度的线性表= “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"); 
    } 
    } 
} 


});

来源

2016-02-18 20:18:36 aemorales1

您可以针对独立于其位置的CSS选择器的结果中的特定元素吗？或关系？

回答

相关问题