p：nth-​​child（n）在CSS div中不起作用

Question

我正在尝试控制div中第一，第二和第三p标签的填充，但是似乎无法正常工作，下面是我的代码

<div class="col-sm-6 col-xs-12 col-md-3 col-lg-3">
   <div class="icon-box-3 wow fadeInUp" data-wow-delay="0.6s" data-wow-offset="150">
      <div class="icon-boxwrap2"><i class="fa fa-medkit icon-box-back2"></i></div>
      <div class="icon-box2-title">Free assessments</div>
      <p>
         We offer FREE 10 minute assessments at our clinics, to see if osteopathy is right for you.
      </p>
      <div class="iconbox-readmore"><a href="faqs.php">FAQs</a></div>
   </div>
</div>
<div class="col-sm-6 col-xs-12 col-md-3 col-lg-3">
   <div class="icon-box-3 wow fadeInDown" data-wow-delay="0.9s" data-wow-offset="150">
      <div class="icon-boxwrap2"><i data-icon="\e609" class="icon-stethoscope icon-box-back2"></i></div>
      <div class="icon-box2-title">Registered</div>
      <p>
         We are registered osteopaths with the General Osteopathic Council.
      </p>
      <div class="iconbox-readmore"><a href="about-ben.php">About</a></div>
   </div>
</div>
<div class="col-sm-6 col-xs-12 col-md-3 col-lg-3">
   <div class="icon-box-3 wow fadeInUp" data-wow-delay="1.2s" data-wow-offset="150">
      <div class="icon-boxwrap2"><i class="icon-ambulance icon-box-back2"></i></div>
      <div class="icon-box2-title">Areas Covered</div>
      <p>
         The areas generally covered are North London and Hertfordshire, but please do ring to see if we will cover your area.
      </p>
      <div class="iconbox-readmore"><a href="faqs.php">FAQs</a></div>
   </div>
</div>
<style>
   .icon-box-3 p:nth-child(1) {
   padding: 0 15px 37px 15px;
   }
   .icon-box-3 p:nth-child(2) {
   padding: 0 15px 37px 15px;
   }
   .icon-box-3 p:nth-child(3) {
   padding: 0 15px 37px 15px;
   }
</style>

当我执行上述操作时，它会使所有三个p标签使用相同的css选择器，并出于某些原因使用以下行

         .icon-box-3 p:nth-child(3) {
           padding: 0 15px 37px 15px;
           }

我不知道哪里出了问题？

Answer 1

代替 nth-child 使用 nth-of-type child

第n个类型用于选择相同的元素类型

.icon-box-3 p:nth-of-type(1) {
  padding: 0 15px 37px 15px;
  color: #f00;
}

Answer 2

您需要在父选择器上应用nth-of-type和nth-child类。 icon-box-3是父div之下的一个孩子，这就是为什么您的课程选择失败的原因。

.icon-wrapper:nth-of-type(1) p {
  background: red;
  padding: 0 15px 37px 15px;
}
.icon-wrapper:nth-of-type(2) p {
  background: green;
  padding: 0 15px 37px 15px;
}
.icon-wrapper:nth-of-type(3) p {
  background: blue;
  padding: 0 15px 37px 15px;
}

<div class="col-sm-6 col-xs-12 col-md-3 col-lg-3 icon-wrapper">
  <div class="icon-box-3 wow fadeInUp" data-wow-delay="0.6s" data-wow-offset="150">
    <div class="icon-boxwrap2"><i class="fa fa-medkit icon-box-back2"></i></div>
    <div class="icon-box2-title">Free assessments</div>
    <p>
      We offer FREE 10 minute assessments at our clinics, to see if osteopathy is right for you.
    </p>
    <div class="iconbox-readmore"><a href="faqs.php">FAQs</a></div>
  </div>
</div>
<div class="col-sm-6 col-xs-12 col-md-3 col-lg-3 icon-wrapper">
  <div class="icon-box-3 wow fadeInDown" data-wow-delay="0.9s" data-wow-offset="150">
    <div class="icon-boxwrap2"><i data-icon="\e609" class="icon-stethoscope icon-box-back2"></i></div>
    <div class="icon-box2-title">Registered</div>
    <p>
      We are registered osteopaths with the General Osteopathic Council.
    </p>
    <div class="iconbox-readmore"><a href="about-ben.php">About</a></div>
  </div>
</div>
<div class="col-sm-6 col-xs-12 col-md-3 col-lg-3 icon-wrapper">
  <div class="icon-box-3 wow fadeInUp" data-wow-delay="1.2s" data-wow-offset="150">
    <div class="icon-boxwrap2"><i class="icon-ambulance icon-box-back2"></i></div>
    <div class="icon-box2-title">Areas Covered</div>
    <p>
      The areas generally covered are North London and Hertfordshire, but please do ring to see if we will cover your area.
    </p>
    <div class="iconbox-readmore"><a href="faqs.php">FAQs</a></div>
  </div>
</div>