根据其前一个兄弟的子元素选择元素

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;}

我知道这行不通，但我需要在包含 ID 为 john 的锚点的 cite 之后仅选择 blockquote 元素。

我不能只更改 CSS 的 HTML。请问有什么想法吗？

如果 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) {
	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>