CSS 선택기에서 '>'와 공백의 차이점은 무엇입니까?

126

이 구문을 사용하는 요점은 무엇입니까

div.card > div.name

이것의 차이점은 무엇입니까

div.card div.name

css css-selectors

— 랜디 메이어
소스

이 질문에 더하여, 나는 이것을 알지 못했고 내가 가지고있는 문제를 해결하는 데 사용될 수 있습니다.이 유형의 선택기를 지원하는 브라우저는 무엇입니까?

— Kyle

3

모든 현재 브라우저에서 지원됩니다. : IE 버전 7에서 지원 받았습니다 msdn.microsoft.com/en-us/library/...

— 마티 Virkkunen

210

A > B A의 직계 자식 인 B 만 선택합니다 (즉, 그 사이에 다른 요소는 없습니다).

A B 그들 사이에 다른 요소가 있더라도 A 안에있는 B를 선택합니다.

— 마티 비르 쿠넨
소스

11

>는 IS 아이 선택기. 을 제외한 두 번째 예에서와 같이 직계 자식 요소 만 지정하고 하위 항목 (손자, 손자 등 포함)은 지정하지 않습니다 >.

자식 선택기는 IE 6 이하에서 지원되지 않습니다. 훌륭한 호환성 표가 여기에 있습니다 .

— 페카
소스

2

div.card > div.name일치 <div class='card'>....<div class='name'>xxx</div>...</div> 하지만 일치 하지 않습니다<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name 둘 다 일치합니다.

즉, >선택기는 오른쪽에서 선택한 요소 >가 왼쪽에서 요소의 가장 한 자식 인지 확인합니다 .

이없는 구문 은의 하위 항목 (자식뿐만 아니라) >과 일치합니다 .<div class='name'><div class='card'>

— 르네 니 피네 거
소스

0

A> B는 A의 직계 자녀 인 경우 B를 선택하고 AB는 B의 직계 자녀인지 여부를 B를 선택합니다.

<p> USING SPACE </p>

<style>
  .a .b {
    background-color: red;
  }
</style>

<span class="a">
  a
  <br>
  <span class="b"> a b</span>
  <br>

  <span class="c">
    <span class="b"> a b c</span>
  </span>
</span>

<br><br>
<p> USING GREATER THAN SIGN</p>

<style>
  .x > .y {
    background-color: red;
  }
</style>

<span class="x">
  x
  <br>
  <span class="y"> x y</span>
  <br>

  <span class="z">
    <span class="y"> x y z</span>
  </span>
</span>

스 니펫 확장

— 오즈 텐
소스

여기에 코드 스 니펫이 있습니다. 당신이 그것을 볼 수 있는지 모르겠어요.

— eozten

데모는 훌륭하지만 실제로는 질문에 답하는 정보에 부수적입니다. 다른 세 가지 답변에 이미있는 정보. 아마도이 질문이 오늘 물었다면 유용 할 것입니다. 그러나 8 살이 넘은 질문을하게된다면 정말 설득력있는 이유 일 것입니다.

— TylerH

0

> 우주

두 가지 시나리오 div > span { }와div span { }

여기서, 요소가 다른 요소 안에 있더라도 요소의 <space>모든 <span>요소를 모두 선택합니다 <div>. >는 <div>요소의 모든 자식을 선택 하지만 다른 요소 안에있는 경우 선택합니다 .

> (보다 큼) :

div > span {
  color: #FFBA00 ;
}

<body>
  <div>

    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
</body>

스 니펫 확장

이것은 단지를 선택 <span>World!</span>하고 <span>내부 <p>태그를 찾지 않습니다 .

우주

div span {
  color: #FFBA00 ;
}

<body>
  <div>
    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
<body>

스 니펫 확장

이 태그는 다른 범위 안에 중첩되어 있어도 모든 범위 태그를 선택합니다.

— S. 고 스와미
소스