用css打造第二段的第一个字符

时间:2017-10-25 09:04:23

标签: html css css3



 <div class="ex1">
      <div>
        <p></p>
        <p>Exmaple 1</p>
        <p>Exmaple 2</p>
      </div>
    </div>
&#13;
&#13;
&#13;

我无法在&#34; Exmaple 1&#34;中选择第一个字符。用css和我找到解决方案

感谢您的支持

1 个答案:

答案 0 :(得分:3)

如果您正在谈论第一个字母的样式,请使用:first-letter伪元素

&#13;
&#13;
.ex1 p:first-letter{
  color:red;
  font-size:2em;
}
&#13;
<div class="ex1">
  <div>
    <p>Example 1</p>
    <p>Example 2</p>
  </div>
</div>
&#13;
&#13;
&#13;

如果您只想在第一个p中应用它,那么也请使用:first-of-type

&#13;
&#13;
.ex1 p:first-of-type:first-letter{
  color:red;
  font-size:2em;
}
&#13;
<div class="ex1">
  <div>
    <p>Example 1</p>
    <p>Example 2</p>
  </div>
</div>
&#13;
&#13;
&#13;

最后,如果您只想定位第二个元素,请使用:nth-child(2)或第二个p,然后:nth-of-type(2)

&#13;
&#13;
.ex1 p:nth-child(2):first-letter{
  color:red;
}
.ex1 p:nth-of-type(2):first-letter{
    font-size:2em;
}
&#13;
<div class="ex1">
  <div>
    <p></p>
    <p>Example 1</p>
    <p>Example 2</p>
  </div>
</div>
&#13;
&#13;
&#13;