给定一些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个元素的线性列表,并将它们中的一个独立于文档中的位置。
答案 0 :(得分:2)
我不认为这是可能的,正如你所描述的那样。 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的解决方案。
答案 1 :(得分:1)
我刚刚看到了一些问题的澄清。这是一个更简单的小提琴,可以通过&#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");
});
答案 2 :(得分:0)
我知道在CSS中没有办法做到这一点。您可以使用JavaScript
选择给定类名的第n个元素var elem = getElementsByClassName('.aClass').item(n-1)
或使用jQuery
var elem = $('.aClass').toArray().filter(function(elem, i){
return i==(n-1);
})[0];
答案 3 :(得分:0)
如果我理解正确,你想要一个包含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");
}
}
}
});