如何选择DOM中h1之后的所有p元素（含嵌套）？求CSS或Nokogiri方案

纯CSS方案 #

利用CSS兄弟选择器结合后代选择器，可精准选中h1元素之后的所有同级p，以及后续兄弟元素中嵌套的所有p：

/* 选中h1之后的同级p，以及后续所有兄弟元素内的p */
h1 ~ p,
h1 ~ * p {
  background: red;
}

替换示例中的样式后，Paragraph 3、Paragraph 4和Paragraph 5会被设置红色背景，而h1之前的Paragraph 1、Paragraph 2不受影响。

Nokogiri方案（Ruby） #

使用XPath的following轴可以轻松定位文档中h1之后的所有p元素（无论层级）：

require 'nokogiri'

html = <<-HTML
<!DOCTYPE html>
<html>
<head>
<style> 
  h1 ~ p {
    background: red;
  }
</style>
</head>
<body>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <h1>Foo</h1>
  <p>Paragraph 3</p>
  <div>
    <p>Paragraph 4</p>
  </div>
  <span>
    <div>
      <p>Paragraph 5</p>
    </div>
  </span>
</body>
</html>
HTML

doc = Nokogiri::HTML(html)
# 定位所有h1之后的p元素
target_paragraphs = doc.xpath('//h1/following::p')
# 为目标元素添加红色背景样式
target_paragraphs.each do |p|
  p['style'] = 'background: red;'
end

puts doc.to_html

执行这段代码后，生成的HTML中目标段落会被添加上红色背景样式。

内容的提问来源于stack exchange，提问作者skamsie