2

有一个容器 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 扩展程序以在现有网站上工作。

4

2 回答 2

4

纯 CSS

设置一个纯 css 方式来定位那些使用通用兄弟选择器的人并不复杂~。

请参阅此小提琴以了解以下代码性能。

.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
    */
}
于 2013-04-27T16:30:37.217 回答
0

尝试这个：

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();
    }
于 2013-04-27T05:36:50.220 回答