CSS에서 "보다 큼"또는 ">"문자는 어떻게 사용됩니까?

CSS 파일에서이 문자를 여러 번 보았지만 어떻게 사용했는지는 알 수 없습니다. 누구나 나에게 설명하고 페이지 스타일을 쉽게 만드는 데 어떻게 유용한 지 보여줄 수 있습니까?

CSS 자식 선택기입니다. P > SPAN태그의 하위 인 모든 SPAN 태그에 따르는 스타일을 적용하는 것을 의미합니다 P.

"자식"은 단순한 자손이 아니라 "즉시 자손"을 의미합니다. 태그의 하위 인 모든 태그 또는 태그의 하위 / 후손 인 다른 태그의 하위 인 모든 태그에 적용되는 스타일을 적용 P SPAN하는 하위 선택기 입니다. 태그의 하위 태그 에만 적용됩니다 .SPANPPP > SPANSPANP

p em

<em>내에있는 모든 항목과 일치합니다 <p>. 예를 들어 다음과 일치합니다 <em>.

<p><strong><em>foo</em></strong></p>
<p>Text <em>foo</em> bar</p>

반면에

p > em

의 <em>직계 자녀 인 과만 일치합니다 <p>. 따라서 다음과 일치합니다.

<p>Text <em>foo</em> bar</p>

하지만:

<p><strong><em>foo</em></strong></p>

이것은 하위 조합으로 알려져 있습니다.

다른 지정된 요소에 포함 된 요소의 내용을 스타일링 할 수 있도록 하위 조합기 선택기가 추가되었습니다. 예를 들어, 특정 클래스의 배경색이 어둡기 때문에 흰색을 특정 클래스에 대한 div 태그 내부의 하이퍼 링크 색상으로 설정하려고한다고 가정합니다. 이것은 아래와 같이 div를 클래스 리소스와 결합하기 위해 마침표를 사용하고 콤비 네이터로보다 큰 부호를 사용하여 아래에 표시된 것처럼 쌍을 a와 결합하여 수행 할 수 있습니다.

div.resources > a{color: white;}

( http://www.xml.com/pub/a/2003/06/18/css3-selectors.html에서 )

E > F

요소 E의 자식 인 F 요소와 일치합니다.

http://www.w3.org/TR/CSS21/selector.html#child-selectors에서 자세히 알아보기