Question

我正在使用HTML文件，其中使用以下内容制作空行：<p><br/></p>。如何在空行之后定位段落元素？我尝试了br + p但没有结果。

[注意：对于每个人来说，这是父母的选择器问题并不明显，因为它不是针对包含换行符的（父）段落元素，而是跟随它的那个。]

Answer 1

我不知道CSS中的方法，但使用jQuery，你可以做到这一点。这是HTML文件：

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="s.css">
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="sh.js"> </script>
</head>
<body>
<p>LILI</p>
<br>
<p>Dina</p>
<p>ADEM</p>
</body>
</html>

使用这个jQuery：

$( document ).ready(function() {
  $( "br" ).nextAll().css( "font-size", "35px" );
});

因此它将应用于此空行之后的所有段落元素。

使用它，Dina和ADEM将font-weight: 35px，而LiLi仍然正常。如果你想使用多种风格，你可以这样做：

$("br").nextAll().css({"color":“beige","font-size":“35px",....});

如果您只想在<br＆gt;之后定位一个段落使用jQuery closest()方法。

Answer 2

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

使用javascript和CSS的组合可以实现您的要求。您可以使用javascript查找仅包含换行符的段落，然后在这些段落中添加一个类（例如，名为linebreak的类）。然后使用CSS使用CSS相邻的兄弟选择器（+）紧跟包含换行符的段落样式。

＆＃13;

// 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')
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

空行后元素的CSS选择器

2 个答案: