对第一个字母应用CSS

问题描述

我在写一个HTML代码，其中第一个字母必须是大的，应该是2行。以下是我的代码。

HTML

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

CSS

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


这里是小提琴链接。

解决方案

如果您只想选择第一个字母的第一个字母 .para 使用此

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

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

因为 .para div不是容器内的唯一子代，所以不能使用：first-child 或类似的东西。因此您需要使用像 + 的兄弟选择器，它选择之后的第一个 .para .section-title

I'm writing a HTML code where in the first letter has to be big and should be of 2 lines. Below is my code.

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

Here is the fiddle link of the same. https://jsfiddle.net/8b5z8gb4/

Please let me know how Can I get this done.

解决方案

if you want to select only the first letter of the first .para use this

.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>

because the .para divs are not the only children inside the container , you can't use :first-child or something like that. so you need to use a sibling selector like + which selects the first .para after the .section-title

这篇关于对第一个字母应用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！