css - CSS3-标签后div的样式部分

Question

我有以下div：

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

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

Answer 1

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

Codepen

但


您无法设置every property (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>