두 가지 스타일 규칙의 차이점은 무엇입니까?

Question

가능한 중복 :
CSS Child vs Descendant selectors

그래서, 차이는 여기에 무엇입니까?

div a { 
    /* Styles here */ 
} 

및

div > a { 
    /* Styles here */ 
} 

난 정말 이해가 안

.

Answer 1

space은 descendant combinator이고, >은 child combinator입니다. 자식은 직접적인 자손을 의미합니다. 자손은 아무리 깊은 부모 요소의 하위 트리에있는 노드를 의미합니다.

Answer 2

일반 단어에 넣어 :

div a {/*properties*/} 

이 선택하고 'DIV'모든 'A'요소에 지정된 스타일을 적용합니다.

---

'>'기호 는 '아이 연결자'입니다 :이 만을 직접 아이 사업부 내부의 'A'태그를 선택합니다

div > a {/*properties*/} 

. 예를 들어

:
CSS :

div > a {color: red} 

HTML :

여기

<div> 
    <a href="#">Link One</a> 
    <span> 
     <a href="#">Link Two</a> 
     <a href="#">Link Three</a> 
    </span> 
    <a href="#">Link Four</a> 
</div> 

은 붉은 색 전용 '링크 하나'와 '링크 네'에 적용됩니다. 'Link Two'& 'Link Three'는 'span'요소 안에 중첩되어 있으므로 선택되지 않습니다.

그들과 함께 주위 재생 : http://dabblet.com/gist/3730661

현재 CSS 선택기에 대한 자세한 내용을보실 수 있습니다 : http://css-tricks.com/child-and-sibling-selectors/