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

Question

＆＃13;

＆＃13;

 <div class="ex1">
      <div>
        <p></p>
        <p>Exmaple 1</p>
        <p>Exmaple 2</p>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

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

感谢您的支持

Answer 1

如果您正在谈论第一个字母的样式，请使用: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;