为什么第一个孩子不工作？我究竟做错了什么？

Question

我有一个烦人的问题。我试图在第一个标题中使用较大的字体。但是我尝试过的一切，都注意到了。...:(

这不起作用：

.featured_one .headline {
  font-size: 16px;
  line-height: 22px;
  font-family: 'Open Sans', sans-serif;
  display: block;
  color: #FFF;
  position: relative;
  bottom: 0;
  float: left;
  width: 100%;
}

.featured_one .headline:first-child {
  font-size: 29px;
  line-height: 38px;
}

<div class="front_content--wrapper">

  <div class="featured_one">
    <a href="/"><img src="/wordpress/wp- 
    content/uploads/2019/04/RIC_BAH2019_INSEASONTEST_RENAULT_01-800x511.jpg">
      <div class="headline"><span>Daniel Ricciardo ziet nog geen verbetering bij 
    Renault</span></div>
    </a>
  </div>

  <div class="featured_one">
    <a href="/"><img src="/wordpress/wp- 
    content/uploads/2019/04/RIC_BAH2019_INSEASONTEST_RENAULT_01-800x511.jpg">
      <div class="headline"><span>Daniel Ricciardo ziet nog geen verbetering bij 
    Renault</span></div>
    </a>
  </div>

  <div class="featured_one">
    <a href="/"><img src="/wordpress/wp- 
    content/uploads/2019/04/LEC_CHI2019_SAT_FERR_01-1-800x511.jpg">
      <div class="headline"><span>Daniel Ricciardo ziet nog geen verbetering bij 
    Renault</span></div>
    </a>
  </div>

</div>

第一个标题应该更大，但它不适用于第一个孩子，也不适合第一个...

Answer 1

您只需要更改：first-child位置，因为它适用于siblings元素

.featured_one:first-child .headline {font-size: 29px;line-height: 38px;} 

.featured_one .headline {
  font-size: 16px;line-height: 22px;
  font-family: 'Open Sans', sans-serif;
  display: block; 
  color: #000000;
  position: relative;
  bottom: 0;
  float: left;
  width: 100%;  
}
.featured_one:first-child .headline {
  font-size: 29px;  
  line-height: 38px;
}

<div class="front_content--wrapper">

    <div class="featured_one"><a href="/"><img src="/wordpress/wp- 
    content/uploads/2019/04/RIC_BAH2019_INSEASONTEST_RENAULT_01-800x511.jpg">
            <div class="headline"><span>Daniel Ricciardo ziet nog geen verbetering bij
                    Renault</span></div>
        </a></div>

    <div class="featured_one"><a href="/"><img src="/wordpress/wp- 
    content/uploads/2019/04/RIC_BAH2019_INSEASONTEST_RENAULT_01-800x511.jpg">
            <div class="headline"><span>Daniel Ricciardo ziet nog geen verbetering bij
                    Renault</span></div>
        </a></div>

    <div class="featured_one"><a href="/"><img src="/wordpress/wp- 
    content/uploads/2019/04/LEC_CHI2019_SAT_FERR_01-1-800x511.jpg">
            <div class="headline"><span>Daniel Ricciardo ziet nog geen verbetering bij
                    Renault</span></div>
        </a></div>

</div>