스타일링 체크 박스의 경우 다른 확인란

Question

다음 코드는 파이어 폭스에 아무런 영향이없는 것으로 보인다 다음이 작동하는 동안

input[type="checkbox"] + input[type="checkbox"] { 
    margin-top: 12px; 
    } 

을 :

input[type="checkbox"] { 
    margin-top: 12px; 
    } 

왜?

---

HTML

<div> 
    <input type="checkbox" name="somename[]" id="somename" value="1"> One<br> 
    <input type="checkbox" name="somename[]" value="2"> Two<br> 
    <input type="checkbox" name="somename[]" value="3"> Three<br> 
    ... 
</div> 

Answer 1

을 더 인접한 체크 박스가 없기 때문에 귀하의 경우에는

이 개재와 함께 작동 <br> 태그 있습니다 .. <br> 태그입니다 그 경우, <br> 태그는 인접한 형제입니다. 형제 인 <input>을 선택하려면 general sibling selector, ~을 사용해야합니다.

input[type="checkbox"] ~ input[type="checkbox"] { 
    margin-top: 12px; 
} 

Answer 2

의 + 선택기 인접 형제 적용하기 때문이다.

input[type="checkbox"] + br + input[type="checkbox"] { 
    margin-top: 12px; 
} 

또는 ~ 선택 사용이에서

input[type="checkbox"] ~ input[type="checkbox"] { 
    margin-top: 12px; 
}