[css] CSS 선택기에서 ‘>’와 공백의 차이점은 무엇입니까?

Program / 글쓴이

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

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>

스 니펫 확장

답변

> 우주

두 가지 시나리오 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>

스 니펫 확장

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

답변