html - 为第一个字母应用 CSS

Question

我正在编写一个 HTML 代码，其中第一个字母必须很大并且应该有 2 行。下面是我的代码。

HTML

<div class="section-sect1">
  <a name="CH_00001-SEC-1"></a>
  <div class="section-title">
    <span class="section-num"></span> Title</div>
  <div class="para">Text1
  </div>
  <div class="para">Text2
  </div>
</div>

CSS

.section-sect1 .para:first-of-type:first-letter {
 border: 1px solid;
 font-weight: bold;
 color: red;
}

这是相同的 fiddle 链接。 https://jsfiddle.net/8b5z8gb4/

请告诉我如何完成此操作。

Answer 1

如果你只想选择第一个 .para 的第一个字母，使用这个

.section-sect1 .section-title + .para:first-letter {
 border: 1px solid;
 font-weight: bold;
 color: red;
}

<div class="section-sect1">
  <a name="CH_00001-SEC-1"></a>
  <div class="section-title">
    <span class="section-num"></span> Title
  </div>
  <div class="para">Text1
  </div>
  <div class="para">Text2
  </div>
</div>

因为 .para div 不是容器内唯一的子元素，所以您不能使用 :first-child 或类似的东西。所以你需要使用像 + 这样的兄弟选择器，它选择 .section-title

之后的第一个 .para