Question

所以这是我从CMS内容中收到的一个示例：

<p>
    First Name
    <br />
    Location
</p>

是否可以在<br>代码之前/之后为特定内容添加样式？

例如，<br>标记之前的每个文字我想要color: red以及之后的任何内容我想要color: purple

Answer 1

将文本包装在带有类名的范围中，并使用CSS设置样式。您可以根据需要尽可能多地获得所需结果。

HTML

<p>
<span class="name">First Name</span>
<br>
<span class="location">Location</span>
</p>

CSS类

.name{
color:red;
}
.location{
color:purple;
}

Answer 2

＆＃13;

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style type="text/css">
  .red {
    color: red;
  }

  .purple {
      color: purple;
  }
  </style>
</head>

<body>
<p>
  First Name
  <br/>
  Location
</p>

<p>
  First Name Bis
<br/>
  Location Bis
</p>

</body>

<script>
var p = $( "p" ).has( "br" ); /* select all p tag with a br tag inside */
var regex = /<p>([\s\S]*?)<br>([\s\S]*?)<\/p>/g; /* regex, i'm not rly familiar but this one select the part between <p> and <br> (group 1) and <br> to </p> (group 2)*/
var i;
for(i = 0; i < p.length; i++){ /* foreach the selected elt */
  var newStr = "";
  while ((match = regex.exec("<p>" + p[i].innerHTML + "</p>")) !== null) { /* adding <div class = "red">(group 1 contents)</div> same with purple */
    newStr += "<div class = \"red\">" + match[1] + "</div><br>";
    newStr += "<div class = \"purple\">" + match[2] + "</div>";
    p[i].innerHTML = newStr;
  }
}
</script>
</html>

＆＃13;

Answer 3

以下内容可以完成你想要做的事情，但这不是一个很好的答案（非常脆弱）。

<p><br></p>
p::before {
  content: "First Name";
  color: red;
}

p::after {
  content: "Location";
  color: purple;
}

CSS样式 - 使用<标签应用<p>标签

3 个答案: