применить другой стиль на дочернем div с помощью css

Question

Я хочу применить другой стиль для разных дочерних элементов div. Вот мой код, но он не работает. Может ли кто-нибудь мне помочь? Как можно изменить стиль для каждого дочернего элемента. Селектор п-й ребенок ('мишень') не работает

HTML:

<div class='background'> 
bg1 
</div> 

<div class='image'> 
img1 
</div> 
<div class='image2'> 
img21 
</div> 
<div class='text'> 
<p> 
     1 A website, also written as web site,is a collection of related web pages, including multimedia content, typically identified with a common domain name, and published on at least one web server. 
    </p> 
</div> 
<div class='background'> 
    bg2 
</div> 
<div class='image'> 
img2 
</div> 
<div class='image2'> 
img22 
</div> 
<div class='text'> 
    <p> 
     2 A website, also written as web site,is a collection of related web pages, including multimedia content, typically identified with a common domain name, and published on at least one web server. 
    </p> 
</div> 

Я не могу получить доступ к каждому Div ребенка отдельно

CSS

div.background:nth-child(1) 
     { 
      position: absolute; 
      margin-top: -200%; 
      width: 100%; 
      height:180%; 
     } 
div.image:nth-child(1){ 
      background-image: url(<?php echo base_url('Images/fantasy_mountain_art_hd_wallpapers.jpg'); ?>) ; 
      position: relative; 
      margin-top: 150px; 
      height: 40%; 
      width: 56%; 
      margin-left: 20%; 
      align-content: center; 
      will-change: scroll-position; 
      pointer-events: auto; 
      background-size: 100% 280px; 
      border: 4px solid gainsboro; 
      border-radius: 5px; 
     } 
div.image2:nth-child(1){ 
      background-image: url(<?php echo base_url('Images/RPyvJD.jpg'); ?>) ; 
      background-size: 100% 280px; 
      position: relative; 
      margin-top: 100px; 
      margin-left: 20%; 
      height: 40%; 
      width: 56%; 
      border: 4px solid gainsboro; 
      border-radius: 5px; 
     } 
    div.text:nth-child(1){ 
      position: relative; 
      color: whitesmoke; 
      margin-top: -10px; 
      width: 50%; 
      font-size: x-large; 
      font-family: Forte; 
      margin-left: 20%; 
     } 
    div.background:nth-child(2) 
     { 
      position: absolute; 
      margin-top: 500px; 
      width: 100%; 
      height: 90%; 
      background-color: black; 
      -webkit-animation-name: example; /* Chrome, Safari, Opera */ 
      -webkit-animation-duration: 20s; /* Chrome, Safari, Opera */ 
      -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */ 
      animation-name: example; 
      animation-duration: 40s; 
      animation-iteration-count: infinite; 
     } 
    div.image:nth-child(2) 
     { 
      background-image: url(<?php echo base_url('Images/tumblr_o7t5h0LV6T1tal018o1_500.gif'); ?>) ; 
      position: absolute; 
      width: 20%; 
      height: 40%; 
      margin-top:5% ; 
      opacity :0.4; 
     } 
    div.image2:nth-child(2) 
     { 
      background-image: url(<?php echo base_url('Images/giphy3.gif'); ?>) ; 
      position: absolute; 
      margin-top: 5%; 
      margin-left: 60%; 
      width: 20%; 
      height: 40%; 
      opacity :0.4; 
     } 

Answer 1

поскольку вы используете классы, которые вам технически не нужно использовать nth-child() для таргетинга на элемент, который вы хотите, однако если у вас есть/необходимость/хотите использовать п-го ребенка, то убедитесь, что ваш придав ему подходящее место, чтобы найти детей, если Вы пишете:

div.image:nth-child(2){} 

он будет искать второй инстанции, где появляется div.image как РЕБЕНОК любой оболочки, поэтому убедитесь, что вы установили оболочку div, и если вы хотите добавить к ней класс контейнера, поместите все элементы html, которые вы хотите использовать nth-child, чтобы найти внутри этого нового контейнера.

, то вы можете использовать селектор, как это:

.container > div:nth-child(1) {} 

надеюсь, что это помогает, гл.