pseudo-selector first-of-type doesnt work

Question

그래서 기본적으로 .round는 첫 번째 유형 선택기로 margin-left 속성을 잃게됩니다. 재미있는만큼 last-of-type selector가 잘 작동합니다. 내가 뭘 잘못하고 있니?

<div id="box"> 
    <div id="headline">One big headline</div> 
    <div class="round">Button 1</div> 
    <div class="round">Button 2</div> 
</div> 

#headline { 
display: block; 
width: 90%; 
margin-left: 5%; 
margin-right: 5%; 
top: 50%; 
line-height: 1.2em; 
font-size: 3.0em; 
font-weight: 800; 
text-align: center; 
text-transform: uppercase; 
color: #333; 
} 
.round { 
display: inline-block; 
background: #15D43C; 
width: auto; 
height: 40px; 
border-radius: 20px; 
padding-left: 2em; 
padding-right: 2em; 
text-align: center; 
font-size: 0.75em; 
font-weight: 700; 
text-transform: uppercase; 
line-height: 40px; 
vertical-align: baseline; 
color: #fff; 
margin-left: 1em; 
margin-top: 1em; 
} 
.round:first-of-type { 
    margin-left: 5em; 
} 

Answer 1

type는 요소 유형 아닌 선택의 결과와 일치 일 입니다.

#box의 자식 인 div 유형의 첫 번째 요소는 클래스 .round의 구성원이 아닌, 그래서 아무것도 .round 및 :first-of-type 모두 일치하지 않습니다.

Answer 2

:first-of-type 어떻게 생각하니 작동하지 않습니다.

.round의 유형은 div입니다. 첫 번째 .round이 첫 번째 유형이 아니기 때문에 (부모 내의 두 번째 div 임) 선택자는 아무 것도 선택하지 않습니다.

.round:nth-child(2)는 :nth-child()를 사용하여이 구체적인 예 여기

Answer 3

JSFiddle을 위해 작동합니다. 가능하다면 의도가 다르지 않으면 사용하지 못하게 할 것입니다.

JSFiddle Demo

다음은 CSS 특이성에 읽을에 대한 좋은 기사입니다. pseudo 셀렉터로 if를 타겟팅하는 대신 클래스를 사용하여 특정 요소를 수정하십시오.

PS이면 #heading에 top: 50%이 필요하지 않습니다. 고정되어 있거나 상대적으로 또는 절대적으로 위치하지 않는 한 아무 의미가 없습니다. 아래

Hacks for dealing with CSS specificity