Question

有一个容器div，里面有其他div，这些子div包含带有一些链接的文本。我正在尝试选择此容器div 中除之外的所有锚标记，以便之后具有特定类的子div。

<div id="the_container"> <div> some text <a href="...">link</a> </div> <div> some text <a href="...">link</a> </div> ... more regular divs below... <div class="NOT_a_regular_child"> this is not text </div> <div> some text <a href="...">link</a> </div> ... more divs come below... </div>

所以，从上面的HTML我想只选择div之前的链接，哪个类是“NOT_a_regular_child”。

我用谷歌搜索了它，但似乎没有一个选择器可以在另一个（？）
之前获取元素
我相信我可以选择所有的子div然后遍历它们并将它们的链接转储到一个数组，直到我到达那个特定的那个但是没有办法只使用css选择器这样做？

我无法更改HTML的结构，因为我只是编写了一个google chrome扩展程序，以便在现有网站上工作。

Answer 1

纯CSS

使用普通兄弟选择器~设置纯css方式来定位那些没什么复杂的。

See this fiddle 以获取以下代码效果。

.the_container a {
    color: blue; 
    /* base link color and styling for container 
       this will be applied to all links above the class
    */
}

/* second selector is optional only if you need to 
handle links in that specially classed container */

.the_container > div.NOT_a_regular_child ~ div a,
.the_container > div.NOT_a_regular_child a /* <-- optional */
{
    color: red;
    /* base link color and styling for container 
       this will be applied to all links above the class
    */
}

Answer 2

试试这个：

function get_p_class(){
var childDivs = document.getElementById('the_container').getElementsByTagName('div');

for(var childDiv = 0;  childDiv < childDivs.length; childDiv++){
    if(childDivs[childDiv].className=="NOT_a_regular_child"){
        //code...
        childDivs[childDiv].className="this_new_class";
        //some other change 
        //or 
        //change the if statement to match what every you would like to do.
    }
 }
}

window.onload = function() {
        get_p_class();
    }

选择所有元素直到达到特定元素

2 个答案:

纯CSS