如何選擇兒童元素，直到元素中找到

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其他任何方式進行。