html - 使用 css 对最后一段中的第一行进行样式化

Question

如何使用 css 将最后一段中的第一句话加粗？我还想在最后一段的顶部添加额外的填充，以便它环绕图像。如果我增加 float 图像底部的填充，该段落不会换行到图像的底部齐平左边缘，它只是沿着它的右侧流动——这不是我想要的。我将一个类绑定(bind)到“p”元素，因为我只想影响某个段落(而且我没有看到“:last-child”伪元素，我也不知道你是否可以在上面使用两个伪元素一个元素或类)。

#wf_mainContent_left p.last_wfp:first-line {
padding-top:20px;
font-weight:bold;
color:red;
}

HTML

<p class="last_wfp">This is the first sentence that I want bold and red. This is the second
 sentence that I don't want that treatment.</p>

当我只想要第一句话时，这两个句子都会加粗，即使它们在同一行。这应该能够根据 this tutorial 完成.并且对填充没有影响。我试过添加 <br>标签，但它增加了很多空间。我尝试设计 <br> 的样式标签，但根据 this post 这是不可能的我刚刚读到的。无论如何，我只希望第一行是粗体，而不是两个句子。

Answer 1

(and I don't see a ":last-child" pseudo-element nor do I know if you can use two pseudo-elements on one element or class)

:last-child 是一个 CSS3 伪类。它不是伪元素，因此您始终可以使用它附加 :first-line 到选择器。

如果你不担心浏览器的兼容性，你可以很容易地使用这个:

#wf_mainContent_left p:last-child:first-line {
    padding-top:20px;
    font-weight:bold;
    color:red;
}

如果您需要兼容性，请坚持使用现有的 CSS 类解决方案。

至于 br 产生太多空白，看看您是否可以降低 p 的 line-height。