空行后元素的 CSS 选择器

Question

我正在处理一个 HTML 文件，其中使用以下命令创建空行:<p><br/></p> 。如何定位此空行之后的段落元素？我已经尝试过br + p没有结果。

[注意:并不是每个人都清楚这是父级选择器问题，因为它不是针对包含换行符的(父)段落元素，而是针对其后面的段落元素。]

Answer 1

注意:我一般不支持用 JavaScript 解决 CSS 问题。然而，纯 CSS 解决方案可能需要一个关系伪类。目前(截至 2018 年 1 月):has() 是 CSS Selectors Level 4 Working Draft 的一部分，但不幸的是它是 not (yet?) supported by any browsers .

---

您所要求的可以通过 javascript 和 CSS 的组合来实现。您可以使用 javascript 查找仅包含换行符的段落，然后向这些段落添加一个类(例如名为 linebreak 的类)。然后使用 CSS 使用 CSS 相邻同级选择器 (+) 对紧随包含换行符的段落后面的段落进行样式设置。

// Find all <br> elements that are children of a <p> element
for(let br of document.querySelectorAll('p > br')) {
  
  // Climb one level up the DOM to select the parent <p>
  let p = br.parentNode
  
  // Use regex to check if the <p> contains only linebreaks
  if( p.innerHTML.match(/^(<br\s?\/?>)+$/gi)) {
  
    // If so, add the class 'linebreak'
    p.classList.add('linebreak')
  }
}

/* Select the <p> following the one containing linebreaks */
p.linebreak + p {
  color: red
}

<p>Paragraph</p>
<p>Paragraph</p>
<p><br></p>
<p>Paragraph after linebreak (Should be red)</p>
<p>Paragraph</p>
<p><br><br></p>
<p>Paragraph after double linebreak (Should be red)</p>
<p>Paragraph</p>
<p>Paragraph</p>