Verwendung von ': nth-of-type' Wählt alle untergeordneten Elemente zusammen, nicht einzeln

Question

Ich bin gewohnt, nth-of-type ein Element innerhalb des Elements (Besitz der Klasse) Ich legte die Pseudo-Klasse auf. Beispielsweise; body div:nth-of-type(24), nach meinem Wissen, würde die vierundzwanzigste div in der body meiner Seite auswählen.

Allerdings habe ich etwas seltsames passiert, wenn ich versuche, dies zu nutzen.

Hier ist mein HTML:

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

Wenn ich versuche, die erste Taste Ziel (unter der a von http://www.projects.crowes.co/biotechgames), sollte ich .page-projects div:nth-of-type(1) button:nth-of-type(1) verwenden und geben Sie dann, was Attribute Ich mag, sagen border: 1px solid red - dies ändern sollte dass zuerst <button 's Grenze zu 1px von solid red, aber stattdessen ändert er sowohl diese Schaltfläche und die nächste (die mit einer a unter http://www.projects.crowes.co/moonsquads/preview/).

Ich finde dann, dass die zweite Taste selbst nicht individuell ausgerichtet werden kann. Meine CSS-Auswahl bezieht sich auf alle Schaltflächen, als ob sie der erste Typ von button Element unter dem Kind div von page-projects sind.

Mache ich das falsch?

Answer 1

machte ich einen JSFiddle es zu erklären: see it here

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

Sie haben a:nth-of-type zu setzen das um einen Tag auszuwählen, und dann können Sie die erste Taste davon auswählen, die die einzige ist.

Andernfalls wird mit Ihrer Bedingung die erste <button>, die die Bedingung gültig ist, ausgewählt, da es nur ein div Element in Ihrer .page-projects-Klasse gibt.