Question

此问题可以是我之前问题的扩展Apply CSS for first letter。

现在在我当前的场景中，我想为第一个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: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的第一个字母，但我只想选择section-sect1的第一个.chapter。

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

请让我知道如何解决这个问题。

Answer 1

不幸的是，第一个类型不能使用类，只能使用html标记。但是在你的情况下，你可以这样做：

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

但是如果你不能使用.figure，你必须在你的第一个.section-sect1上添加一个类，或者更改他的标签，这样你就可以在css中使用标签代替一个类： / p>

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

Answer 2

如果你想给孩子造型，那么你需要把数据放在树上。

我为你附上例子，这里是JsFiddle：

https://jsfiddle.net/8b5z8gb4/6/

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

Answer 3

另一种方法是将类应用于所有.section-sect1，然后覆盖.section-sect1，除了第一个使用通用兄弟选择器：

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: