CSS '>'선택기;

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) 및 사용법에 대한 좋은 예가 있습니다.

---

>모든 직계 자손 / 어린이를 선택합니다

공간 선택기는 모든 깊은 자손을 선택하는 반면, >선택기 보다 큰 선택자는 모든 직계 자손 만 선택합니다. 예를 들어 바이올린을 참조하십시오.

div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* every John is red */
.b > b { color: blue; } /* Only John 3 and John 4 are blue */

<div class="a">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>

<div class="b">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>

---

CSS 자식 선택기입니다. 예:

div > p div의 직계 자식 인 모든 단락을 선택합니다.

참조 이

---

다른 사람들이 말했듯이, 그것은 직접적인 아이입니다. 그러나 이것은 단지 공간을 떠나는 것과 다르다는 것을 주목할 가치가 있습니다 ... 공간은 모든 자손을위한 것입니다.

<div>
  <span>Some text</span>
</div>

div>span일치하지만 다음 과 일치 하지 않습니다 .

<div>
  <p><span>Some text</span></p>
</div>

이를 위해 div>p>span또는을 할 수 div span있습니다.

---

Child Selector입니다.

요소가 일부 요소의 하위 인 경우 일치합니다. ">"로 구분 된 둘 이상의 선택기로 구성됩니다.

예 :

다음 규칙은 BODY의 자식 인 모든 P 요소의 스타일을 설정합니다.

body > P { line-height: 1.3 }

예 :

다음 예제는 하위 선택기와 하위 선택기를 결합합니다.

div ol>li p

LI의 자손 인 P 요소와 일치합니다. LI 요소는 OL 요소의 자식이어야합니다. OL 요소는 DIV의 자손이어야합니다. ">"결합기 주변의 선택적인 공백이 제거되었습니다.

---

부모 참조를 선언합니다.이 페이지에서 정의를 확인하십시오.

http://www.w3.org/TR/CSS2/selector.html#child-selectors

---

부모 / 자식을 의미합니다

예:

html> body

그것은 몸이 HTML의 자식이라는 것을 말하는 것입니다.

체크 아웃 : 선택기

참고 URL : https://stackoverflow.com/questions/4459821/css-selector-what-is-it