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

Question

我有以下div：

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

是否可以click me仅使用CSS设置与div其余部分不同的样式？

Answer 1

您可以设置:first-line不同的样式。如果只有两行，那么在纯CSS中设置第二行和最后一行的样式比第一行是可行的。

码笔

但

• 您无法为每个媒体资源设置样式（MDN）
• 确定文本将恰好占据2行将忽略诸如智能手机之类的狭窄设备（您好RWD）或根据每个用户的意愿进行缩放（图形或文本缩放）。网络不是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>