如何选择儿童元素，直到元素中找到

Question

我有这样的内容：

<div class="content"> 

    <div class="row"> 
     <h1>foo1</h1> 
    </div> 

    <div class="row"> 
     <a href="#">foo11</a> 
    </div> 

    <div class="row"> 
     <a href="#">foo12</a> 
    </div> 

    <div class="row"> 
     <h1>foo2</h1> 
    </div> 

    <div class="row"> 
     <a href="#">foo21</a> 
    </div> 

</div> 

如何选择H1标签foo1和foo2的之间的联系？

我已经试过这样：

.content .row > :not(h1) a 

但这种选择上：

<a href="#">foo11</a> 
<a href="#">foo12</a> 
<a href="#">foo21</a> 

和我要的是：

<a href="#">foo11</a> 
<a href="#">foo12</a> 

而且，div.row后的数包含h1的行是可变的。

Answer 1

实质上，您的层次结构在HTML中没有以层级形式表示。最好的解决方案是在代表层次结构的HTML中添加另一个级别。

如果你不能做到这一点，并坚持这一HTML，那么你就可以尝试sibling combinators，但在任何情况下，你会需要一些方法来解决foo1和foo2元素。如果您知道订单，数据属性或其他任何内容，那可能是一个类，或者nth-child。这不可能是<h1>元素上的东西，因为CSS无法“重复”。它必须是解决包含h1的更高级别row元素的一种方法。在下面，我假设你有一个可用的课程。在这种情况下：

/* Make everything after `foo1` red. */ 
 
.foo1 ~ .row a { color: red; } 
 

 
/* But make `foo2` and everything after it the original color. */ 
 
.foo2.row a, .foo2 ~ .row a { color: inherit; }

<div class="content"> 
 

 
    <div class="row foo1"> 
 
     <h1>foo1</h1> 
 
    </div> 
 

 
    <div class="row"> 
 
     <a href="#">foo11</a> 
 
    </div> 
 

 
    <div class="row"> 
 
     <a href="#">foo12</a> 
 
    </div> 
 

 
    <div class="row foo2"> 
 
     <h1>foo2</h1> 
 
    </div> 
 

 
    <div class="row"> 
 
     <a href="#">foo21</a> 
 
    </div> 
 

 
</div>

Answer 2

这是有点你在找什么jsfiddle ？

for (var i = 0; i < document.getElementsByTagName('a').length; i++) { 

var x=document.getElementsByTagName('a')[i]; 
var t=x.innerHTML; 

if (t=='foo11'||t=='foo12') { 
    x.style.backgroundColor="red"; } 
} 

Answer 3

下面应该工作：

.content .row:not(:last-child) a { 
 
     background-color: red; 
 
    }

<div class="content"> 
 
    <div class="row"> 
 
     <h1>foo1</h1> 
 
    </div> 
 
    <div class="row"> 
 
     <a href="#">foo11</a> 
 
    </div> 
 
    <div class="row"> 
 
     <a href="#">foo12</a> 
 
    </div> 
 
    <div class="row"> 
 
     <h1>foo2</h1> 
 
    </div> 
 
    <div class="row"> 
 
     <a href="#">foo21</a> 
 
    </div> 
 
</div>

Answer 4

你可以用变量div的做这样的：

.content > .first ~ .row > a {color: red} 
 
.content > .second ~ .row > a {color: initial}

<div class="content"> 
 

 
    <div class="row first"> 
 
    <h1>foo1</h1> 
 
    </div> 
 

 
    <div class="row"> 
 
    <a href="#">foo11</a> 
 
    </div> 
 

 
    <div class="row"> 
 
    <a href="#">foo12</a> 
 
    </div> 
 

 
    <div class="row"> 
 
    <a href="#">foo13</a> 
 
    </div> 
 

 
    <div class="row second"> 
 
    <h1>foo2</h1> 
 
    </div> 
 

 
    <div class="row"> 
 
    <a href="#">foo21</a> 
 
    </div> 
 

 
    <div class="row"> 
 
    <a href="#">foo22</a> 
 
    </div> 
 

 
    <div class="row"> 
 
    <a href="#">foo23</a> 
 
    </div> 
 

 
</div>

这里使用了initial关键字其中color属性设置为默认值，并没有确定的其他两个类为.row的与h1标签内，这不能与纯CSS其他任何方式进行。