基于其前一个兄弟的孩子选择元素

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>