CSS 에서 '>'가 하는 역할

 

질문 : CSS '>'선택기; 뭐야?

---

CSS 코드에서 사용 된 "보다 큼"( > )을 몇 번 보았지만 그 기능을 이해할 수 없습니다. 그것은 무엇을합니까?

답변

---

예를 들어 다음과 같이 중첩 된 div가있는 경우 :

<div class='outer'>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

스타일 시트에서 다음과 같이 CSS 규칙을 선언합니다.

.outer > div {
...
}

규칙은 "중간"클래스가있는 div에만 적용됩니다. 이러한 div는 클래스가 "outer"인 요소의 직계 하위 항목 (직계 하위)이기 때문입니다 (물론 이러한 규칙을 재정의하는 다른보다 구체적인 규칙을 선언하지 않는 한). . 바이올린을 참조하십시오.

 

div {
  border: 1px solid black;
  padding: 10px;
}
.outer > div {
  border: 1px solid orange;
}

<div class='outer'>
  div.outer - This is the parent.
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
</div>

<p>Without Words</p>

<div class='outer'>
  <div class="middle">
    <div class="inner">...</div>
  </div>
  <div class="middle">
    <div class="inner">...</div>
  </div>
</div>

대신에 공간이 있다면 > 대신 선택기간에 규칙이 중첩 된 div 모두에 적용됩니다. 이 공간은 훨씬 더 일반적으로 사용되며 "하위 선택자"를 정의합니다. 즉, > 처럼 바로 아래의 자식이 아닌 트리 아래에서 일치하는 요소를 찾습니다.

참고 : > 선택기는 IE6에서 지원되지 않습니다. 그러나 IE7 및 IE8을 포함한 다른 모든 현재 브라우저에서 작동합니다.

잘 사용되지 않는 CSS 선택자를 찾고 있다면 + , ~ , [attr] 선택 자도 살펴볼 수 있습니다. 모두 매우 유용 할 수 있습니다.

이 페이지 에는 사용 가능한 모든 선택기의 전체 목록과 다양한 브라우저 (주로 문제가있는 IE)에서의 지원에 대한 세부 정보 및 사용의 좋은 예가 있습니다.

출처 : https://stackoverflow.com/questions/4459821/css-selector-what-is-it