html - 将CSS添加到命名的第一个 child

Question

这个问题可以是我上一个问题Apply CSS for first letter的延伸.

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

下面是我的 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:first-of-type .section-title + .para:first-letter {
 border: 1px solid;
 font-weight: bold;
 color: red;
}

这里当我使用下面的 CSS 时。

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

它是选择所有section-sect1的首字母，但我只想选择.chapter的第一个section-sect1 >.

这是一个工作 fiddle 。 https://jsfiddle.net/8b5z8gb4/3/

请告诉我如何解决这个问题。

Answer 1

不幸的是，:first-of-type 不适用于类，只能用于 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;
}