基於其前一個兄弟的孩子選擇元素

Question

我有這樣的代碼：

<cite> 
<a id="john" href="javascript: void(0)">John</a> 
<span>time</span> 
<a>DELETE</a> 
</cite> 
<blockquote>hello there</blockquote> 

這是我的CSS：

cite #john + blockquote {color:black;} 

我知道這不會工作，但我需要一些東西來在cite之後只選擇包含ID爲john的錨點的元素。

我無法更改HTML只有CSS。請有任何想法嗎？

如果CSS不可能，那麼JavaScript解決方案也會受到歡迎。

Answer 1

您可以使用以下jQuery選擇器來選擇所需的元素。

$('cite').has('a#john').next('blockquote') 

$('cite').has('a#john').next('blockquote').addClass('active');

.active { 
 
    background: green; 
 
} 
 

 
blockquote { 
 
    margin-right: 0; 
 
    margin-left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<cite> 
 
    <a id="john" href="javascript: void(0)">John</a> 
 
    <span>time</span> 
 
    <a>DELETE</a> 
 
</cite> 
 
<blockquote>hello there</blockquote> 
 
<cite> 
 
    <a href="javascript: void(0)">John</a> 
 
    <span>time</span> 
 
    <a>DELETE</a> 
 
</cite> 
 
<blockquote>hello there</blockquote> 
 
<cite> 
 
    <a id="john" href="javascript: void(0)">John</a> 
 
    <span>time</span> 
 
    <a>DELETE</a> 
 
</cite> 
 
<blockquote>hello there</blockquote>

解決方案，而jQuery的：

var activeClass = 'active'; 
 
var cites = document.querySelectorAll('cite'); 
 

 
[].forEach.call(cites, function(elem) { 
 
\t if(elem.querySelector('a#john')) { 
 
     var blockQuote = elem.nextElementSibling; 
 
     blockQuote.className = blockQuote.className + activeClass; 
 
    } 
 
});

.active { 
 
    background: green; 
 
} 
 

 
blockquote { 
 
    margin-right: 0; 
 
    margin-left: 0; 
 
}

<cite> 
 
    <a id="john" href="javascript: void(0)">John</a> 
 
    <span>time</span> 
 
    <a>DELETE</a> 
 
</cite> 
 
<blockquote>hello there</blockquote> 
 
<cite> 
 
    <a href="javascript: void(0)">John</a> 
 
    <span>time</span> 
 
    <a>DELETE</a> 
 
</cite> 
 
<blockquote>hello there</blockquote> 
 
<cite> 
 
    <a id="john" href="javascript: void(0)">John</a> 
 
    <span>time</span> 
 
    <a>DELETE</a> 
 
</cite> 
 
<blockquote>hello there</blockquote>