'：nth-​​of-type'を使用すると、すべての子要素を個別に選択するのではなく、個別に選択します。

Question

私はnth-of-typeの要素を選択しています（クラスを所有しています）。例えば; body div:nth-of-type(24)は私の知る限り、私のページのbodyにある第二十二番目のdivを選択します。

しかし、私はこれを利用しようとすると何か不思議なことが起こった。ここで

は私のHTMLです：私は（ http://www.projects.crowes.co/biotechgamesの a下）最初のボタンをターゲットにしようと

  <div class="page-projects"> 

      <p>Projects</p> 
      <div> 
       <a href="http://www.projects.crowes.co/biotechgames"> 
        <button> 
         <img src="../assets/pro/cro-biotechlogo.png" /> 
         <p>BioTech Games</p> 
        </button> 
       </a> 
       <a href="http://www.projects.crowes.co/moonsquads/preview/"> 
        <button> 
         <img src="../assets/pro/cro-moonsquadslogo.png" /> 
         <p>Moonsquads</p> 
        </button> 
       </a> 
      </div> 
     </div> 

、私は.page-projects div:nth-of-type(1) button:nth-of-type(1)を使用して、私の好きな属性を何でも入力してください、と言うborder: 1px solid red - これは変更する必要があります最初の<buttonの境界が1pxのsolid redに変更されていますが、代わりにボタンと次のボタンの両方が変更されます（aがhttp://www.projects.crowes.co/moonsquads/preview/）。

次に、2番目のボタン自体を個別にターゲティングすることはできません。私のCSSセレクタは、すべてのボタンを、divのpage-projectsの下のbutton要素の最初の種類のように扱います。

これは間違っていますか？

Answer 1

私はそれを説明するJSFiddleをした：see it here

.page-projects div:nth-of-type(1) a:nth-of-type(1) button {border: 1px solid red} 

あなたが最初のタグを選択しa:nth-of-typeを入れて、その後、あなたは一つだけであることの最初のボタンを選択することができています。

それ以外の条件では、.jpage-projectsクラスにdiv要素が1つしかないため、条件を満たす最初の<button>をすべて選択します。