基於兄弟內容存在的CSS選擇

Question

這是CSS選擇器學習的一部分，我遇到了這個問題。我試圖根據兄弟元素的存在選擇一個元素。所以，如果我要舉一個例子，

<div class = "parentDiv"> 
    <div class = "abc"> 
    <span>Note</span> 
    </div> 
    <div class = "abd"> 
    <span><a>testLink</a></span> 
    </div> 
</div> 
<div class = "parentDiv"> 
    <div class = "abc"> 
    <span>Note2</span> 
    </div> 
    <div class = "abd"> 
    <span>te</span> 
    </div> 
</div> 

對於上面的例子，我想選擇內部.abc類的所有span元素，如果它的兄弟.abd有a標籤

我想什麼是document.querySelectorAll('.parentDiv > .abc span ~ .abd span a');這似乎沒有工作..任何想法我可能是做錯了

DEMO

Answer 1

更新

它是使用純JavaScript替代：

var selectors = document.querySelectorAll('.abd span a'); 
 

 
if (selectors) { 
 
    selectors.forEach(function(selector) { 
 
    selector.style.backgroundColor = 'yellow'; 
 
    selector = selector.parentNode.parentNode.parentNode; 
 
    elements = selector.querySelectorAll('.abc span'); 
 
    if (elements) { 
 
     elements.forEach(function(element) { 
 
     element.style.backgroundColor = 'red'; 
 
     }); 
 
     console.log('.abc span: ' + elements.length); 
 
    } 
 
    }); 
 

 
    console.log('.abd span a: ' + selectors.length); 
 
}

<div class="parentDiv"> 
 
    <div class="abc"> 
 
    <span>Class> abc, tag> span: 1.0</span><br> 
 
    <div>Class> abc, tag> div: 1.0</div> 
 
    <span>Class> abc, tag> span: 1.1</span><br> 
 
    <span>Class> abc, tag> span: 1.2</span><br> 
 
    <div>Class> abc, tag> div: 1.1</div> 
 
    <div>Class> abc, tag> div: 1.2</div> 
 
    </div> 
 
    <div class="abd"> 
 
    <span><a>Class> abd, tag> span a : 1.0 </a></span> 
 
    </div> 
 
</div> 
 
<div class="parentDiv"> 
 
    <div class="abc"> 
 
    <span>Class> abc, tag> span: 2.0</span><br> 
 
    <span>Class> abc, tag> span: 2.1</span><br> 
 
    <span>Class> abc, tag> span: 1.2</span><br> 
 
    </div> 
 
    <div class="abd"> 
 
    <span>class> abd, tag> span: 2.0</span> 
 
    </div> 
 
    <div class="parentDiv"> 
 
    <div class="abc"> 
 
     <span>Class> abc: 3.0</span> 
 
    </div> 
 
    <div class="abd"> 
 
     <span><a>Class> abd, tag> span a : 3.0</a></span> 
 
    </div> 
 
    </div> 
 

 
    <div class="parentDiv"> 
 
    <div class="abc"> 
 
     <span>Class> abc, tag> span: 4.0</span> 
 
    </div> 
 
    <div class="abd"> 
 
     <span>Class> abd, tag> span: 4.0</span> 
 
    </div> 
 
    <div class="abc"> 
 
     <span>Class> abc, tag> span: 4.1</span><br> 
 
     <span>Class> abc, tag> span: 4.2</span><br> 
 
     <span>Class> abc, tag> span: 4.3</span><br> 
 
    </div> 
 
    </div>

Answer 2

波浪符號組合子僅選擇如果操作數是相同的父的兒童。他們必須處於同一水平。 MDN reference。

Answer 3

這不能用CSS選擇器來完成（yet）。

~選擇器選擇DOM樹中同一級別上的元素。您的a元素不是您的span的直接兄弟，這就是您的選擇器無法返回任何結果的原因。

//What you'll want to do, is first select all instances of links: 
var links = document.querySelectorAll('.parentDiv > .abd span a'); 

//Let's also create an empty array for matches: 
var s = []; 

//Then iterate over our matches: 
Array.prototype.forEach.call(links, findSiblings); 

function findSiblings(link){ 
    //Here, we can traverse back up to .parentDiv: 
    var parent = link.parentElement.parentElement.parentElement; 
    //Now, we have a only '.parentDiv's that contain '>.abd span a'. 
    //Let's run another query on that element to find any spans contained in '.abc': 
    var spans = parent.querySelectorAll('.abc span'); 
    //Now, we have a new collection. Let's push each to our array: 
    Array.prototype.forEach.call(spans, function(element){ 
     s.push(element) 
    }); 
} 

//Now, we have all the matches in our s-array: 
alert(s.length); 

演示+代碼的一個更緊湊的版本：https://jsfiddle.net/p6nz011p/6/

---

或者，如果你使用jQuery，你可以簡單地做：

var s = $('.parentDiv:has(>.abd span a) >.abc span'); 
alert(s.length); 

注意，一旦瀏覽器支持CSS Selectors Level 4 :has() selector，你也可以在querySelectorAll()中使用這個沒有jQuery的選擇器。