Html 将css添加到命名的第一个子级

这个问题可以是我上一个问题的延伸

现在在我当前的场景中，我想为第一个div应用样式，类为

section-sect1

的段落

下面是我的HTML

<div class="chapter">
  <div class="figure">
    <img class="graphic" src="img.jpg" alt=""></div>
  <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>
    <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>
</div>

当我使用下面的CSS时

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

它正在选择所有

section-sect1

中的第一个字母，但我只想选择

章节的第一个
section-sect1

这是一把小提琴

请让我知道如何解决这个问题
 不幸的是，第一种类型不适用于类，只适用于html标记。但是，在您的情况下，您可以这样做：

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

但是如果不能使用.figure，则必须在第一个.section-sect1上添加一个类，或者更改他的标记，以便在css中使用标记而不是类：

<div class="chapter">
  <div class="figure">
    <img class="graphic" src="img.jpg" alt=""></div>
  <section 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>
  </section>
    <section 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>
  </section>

</div>


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


标题
文本1
文本2
标题
文本1
文本2
章节章节：第一种类型章节标题+段落：第一个字母{
边框：1px实心；
字体大小：粗体；
颜色：红色；
}
如果您想要给子样式设置，那么您需要像树一样放置数据

我为您附上一个示例，下面是JSFIDLE：



标题
文本1
文本2
标题
文本1
文本2
.第章.儿童持有人.第1节：第一个孩子{
边框：1px实心；
字体大小：粗体；
颜色：红色；
}
另一种方法是将类应用于所有
.section-sect1
，然后覆盖
.section-sect1
，第一种方法除外，使用通用同级选择器：


.章.节-节1.节标题+.段落：第一个字母{
边框：1px实心；
字体大小：粗体；
颜色：红色；
}
.章.节-sect1~.节-sect1.节标题+.段：第一个字母{
边界：无；
字体大小：正常；
颜色：继承；
}

标题
文本1
文本2
标题
文本1
文本2
没有第n个类的
选择器。如果我在这里理解正确，您需要将此样式应用于
的第一个实例中。第一个实例中的
.section-sect1
？如果是这种情况，你需要特别注意你的
n个孩子
选择器，因为正如@Paulie\u D已经指出的，没有
n个类
（希望我们能在不久的将来看到规范中引入这一点，这将非常有帮助）。下面是一个使用
nth child
选择器实现这一点的示例：
。章节。章节1:nth child（2）。章节标题：type+的第一个。段落：第一个字母
<div class="chapter">
  <div class="figure">
    <img class="graphic" src="img.jpg" alt=""></div>
  <section 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>
  </section>
    <section 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>
  </section>

</div>


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

<div class="chapter">
  <div class="figure">
    <img class="graphic" src="img.jpg" alt="">
    </div>

  <!-- Child Holder -->
  <div class="child-holder">
  <!-- First Child -->
  <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>
  <!-- Second Child -->
  <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>
</div>
  </div>

.chapter .child-holder .section-sect1:first-child {
 border: 1px solid;
 font-weight: bold;
 color: red;
}