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

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

---

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

div.card > div.name

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

div.card div.name

---

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

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

---

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

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

---

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'>

---

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>

참고 URL : https://stackoverflow.com/questions/2636379/what-is-the-difference-between-and-a-space-in-css-selectors