CSS3 - 在 <br /> 标签后样式化 div 的部分

Question

I have following div:

<div class="mydiv">
     This is some introduction text
     <br />
     click me
</div>

只使用CSS，是否可以使click me的样式与其余div不同？

- user1049961

---

将其包装在一个 span 中。为该 span 添加样式。 - Forklift

甚至更好的是，使用a或button标签，因为我猜您希望它可以被点击。 - Pevara

我无法访问那部分代码。我知道我可以使用JavaScript来实现这个，只是好奇是否有可能仅使用CSS来完成。 - user1049961

哦，仅仅是CSS？不是的。CSS选择器是标签、类和ID粒度的。我不知道如何告诉它们“选择这个标签后面没有被包裹在标签中或者有其他标记的文本”。 - Forklift

Answer 1

你可以使用 :first-line 样式来对第一行进行不同的样式处理。如果只有2行文本，就算可以使用纯CSS对第二行和最后一行进行样式处理，但是也并不是所有属性都能被处理。毕竟不能确保一个文本只占据2行，因为这将忽略像智能手机这样的窄设备（响应式Web设计）或每个用户的缩放意愿（图形或文本缩放）。网络不是PDF :)

Codepen

但是

• 你无法样式化每个属性(MDN)。
• 确信文本将仅占用两行将会无视狭窄设备（如智能手机）或用户缩放意愿（图形或文本缩放），这在现代网页设计中必须考虑。而且，Web不是PDF :)

+1 至 Pevara 的建议: 应该将其作为链接或按钮，这样可以轻松地进行样式处理

div {
  text-transform: uppercase;
  font-size: 2rem;
  color: red;
}
div::first-line {
  text-transform: initial;
  font-size: 1rem;
  color: initial;
}

<p>OK</p>
<div class="mydiv">
     This is some introduction text
     <br />
     click me
</div>
<hr>
<p>#fail</p>
<div class="mydiv" style="width: 100px; border: 1px dotted blue">
     This is some introduction text
     <br />
     click me
</div>

- FelipeAls

---

很棒的解决方案。对我来说，包装会非常麻烦，因为文本来自用户输入字段。 - Hebe

Answer 2

没有修改HTML或使用JavaScript，纯CSS无法选择文本“click me”。

- j08691