如何通过CSS为带类名的p标签内<br>换行后的文本设置不同样式？

当然可以通过CSS实现这个需求，下面是两种简单可行的方案：

方案1：利用::first-line伪元素（推荐） #

这个伪元素会精准匹配<p>内的第一行文本（也就是<br>之前的内容），剩下的第二行文本会继承<p>元素的基础样式，以此实现差异化格式。

示例代码 #

HTML（保持你的原有结构）

<div class="list-task-responsible">
   <img src="img/energy-consumption_light.png"/>
   <p class="list-task-notes">800,10 kWh <br> 
   17.11.2022 - 20.11.2022</p>
</div>

CSS

/* 设置第一行（数值部分）的样式，保留你原本的正确格式 */
.list-task-notes::first-line {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2d3436;
}

/* 设置第二行（日期部分）的自定义样式 */
.list-task-notes {
  font-size: 0.85rem;
  color: #636e72;
  line-height: 1.8;
}

方案2：微调HTML结构（更灵活） #

如果需要对两行文本进行更精细化的控制，可以把两行内容分别包裹在<span>标签中，再通过类名单独设置样式：

示例代码 #

HTML

<div class="list-task-responsible">
   <img src="img/energy-consumption_light.png"/>
   <p class="list-task-notes">
     <span class="task-value">800,10 kWh</span> <br> 
     <span class="task-date">17.11.2022 - 20.11.2022</span>
   </p>
</div>

CSS

/* 数值部分样式 */
.task-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2d3436;
}

/* 日期部分样式 */
.task-date {
  font-size: 0.85rem;
  color: #636e72;
}

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