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;
}

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

请让我知道如何完成这项工作。

Answer 1

使用:first-letter代替:first-of-type:first-letter

检查我已更新的fiddle

Answer 2

如果您只想选择第一个.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或类似的东西。所以你需要使用像+这样的兄弟选择器，它选择.para之后的第一个.section-title

Answer 3

您可以使用以下代码实现此目的。

.para::first-letter{
  font-size: 20px;
}

使用::first-letter您可以检测para课程中的第一个字母，现在您可以为第一个字母设置样式。

Answer 4

您的代码看起来很酷，并且不太关注。只需从CSS中删除:first-of-type即可完成！

Answer 5

你可以在课堂上添加第一个字母

像那样：

＆＃13;

.firstcharacter { float: left; color: #903; font-size: 50px; line-height: 20px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

＆＃13;

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

＆＃13;

或者你在标签p

中添加测试像那样：

＆＃13;

.string p:first-child:first-letter { float: left; color: #903; font-size: 50px; line-height: 20px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia;}
.string p {margin-bottom: 0px;}

＆＃13;

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

＆＃13;

Answer 6

您可以将第一个字母放在单独的标记中，然后将该标记设置为不同的样式：

<span style="font-weight: bold">F</span><p>irst paragraph</p>

获取此信息：

F 第一段

首字母应用CSS

6 个答案: