CSSを使って子divに異なるスタイルを適用する

Question

divの異なる子に異なるスタイルを適用したい。ここに私のコードはありますが、動作しません。誰か助けてくれますか？どのように各div子供のスタイルを変更する可能性があります。セレクタn番目の子に動作していない（ 'ターゲット'）

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が表示された第二のインスタンスを探します：あなたは/必要性/ n番目の子を使用したいを持っている場合は、あなたが書いた場合、あなたはそれをして子供たちを見つけるために適切な場所を与えることを確認してくださいラッパーが何であれ、そのチャイルドとしてdivラッパーを設定し、コンテナのクラスを追加したい場合は、nth-childを使用するhtml要素をすべてこの新しいコンテナー内に配置します。

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

はGL、それが役に立てば幸い：

あなたは、このようなセレクタを使用することができます。