CSS 자식 대 후손 선택기

CSS 자식 대 후손 선택기

저는 이 두 셀렉터 사이가 조금 혼란스럽습니다.

종속 선택기가 다음을 수행합니다.

div p

올선별p일 이내에div직계존비속이든 아니든?그래서 만약에.p다른 안에 있습니다.div그래도 선택이 되나요?

그런 다음 자식 선택기:

div > p

뭐가 다른 거지?아이란 곧 태어날 아이를 뜻합니까?예.

<div><p>

대

<div><div><p>

둘 다 선택되나요, 아닌가요?

영어로 "child"와 "descendent"라는 단어가 무엇을 의미하는지 생각해 보세요.

• 제 딸은 제 자식이자 제 후손입니다.
• 제 손녀는 제 아이는 아니지만 제 후손입니다.

네, 맞습니다.div p는 다음 예제와 일치하지만,div > p하지 않을 것이다.

<div><table><tr><td><p> <!...

첫 번째 것은 자손 선택기라고 하고 두 번째 것은 자식 선택기라고 합니다.

기본적으로 "a b"는 a 안에 있는 모든 b의 것을 선택하는 반면 "a>b"는 a의 외동아들인 b의 것을 선택하지만 b의 자녀인 a의 것을 선택하지는 않습니다.

이 예는 다음과 같은 차이를 보여 줍니다.

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

abc와 def의 배경색은 초록색이지만 ghi의 배경색은 빨간색입니다.

중요: 규칙의 순서를 다음과 같이 변경할 경우:

div>span{background:green}
div span{background:red}

하위 선택자가 하위 항목도 선택하므로 모든 문자의 배경이 빨간색으로 표시됩니다.

이론상: 자녀 => 조상의 직계 후손(예: 조와 그의 아버지)

후손 => 특정 조상(예: 조와 그의 고조부)의 후손인 모든 요소

실제로: 다음 HTML을 사용해 보십시오.

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

다음 CSS를 사용하여

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

http://jsfiddle.net/X343c/1/

Internet Explorer 6에서는 하위 선택기를 지원하지 않습니다. (jQuery/Prototype/에서 선택기를 사용하는 경우)스타일시트보다는 YUI etc selector(YUI etc selector)가 여전히 작동합니다.)

디브프

부모, 조부모 등 하나 이상이 'div' 요소인 모든 'p' 요소를 선택합니다.

div > p

즉시 자녀를 의미합니다. 부모가 'div' 요소인 모든 'p' 요소를 선택합니다.

div > p성냥들ps 가 있는div부모 -<div><p>당신의 질문에

div p성냥들ps 가 있는div조상(부모, 조부모, 증조부모 등) -<div><p>그리고.<div><div><p>당신의 질문에

시각적 DOM 트리별 모든 선택기 간의 차이:

CSS 선택 및 특정 요소에 스타일 적용은 돔 요소를 통과하여 수행할 수 있습니다 [예제

예

.a .b .c .d{
    background: #bdbdbd;
}
div>div>div>div:last-child{
    background: red;
}

<div class='a'>The first paragraph.
 <div class='b'>The second paragraph.
  <div class='c'>The third paragraph.
   <div class='d'>The fourth paragraph.</div>
   <div class='e'>The fourth paragraph.</div>
  </div>
 </div>
</div>

언급URL : https://stackoverflow.com/questions/1182189/css-child-vs-descendant-selectors