p: nth-child (n) не работает в css divs - PullRequest
Новая
       2

p: nth-child (n) не работает в css divs

0 голосов
/ 15 мая 2019

Я пытаюсь контролировать заполнение первого, второго и третьего тегов p внутри 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="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;
           }

Я не понимаю, в чем дело?

Ответы [ 2 ]

1 голос
/ 15 мая 2019

Вместо nth-child используйте nth-of-type child

nth-of-type используется для выбора того же типа элемента 

.icon-box-3 p:nth-of-type(1) {
  padding: 0 15px 37px 15px;
  color: #f00;
}
0 голосов
/ 15 мая 2019

Вам необходимо применить nth-of-type и nth-child классы к родительскому селектору. icon-box-3 - это ребенок в родительском классе, поэтому ваш выбор класса не удался. 

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