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는 클래스가 "외부"인 요소의 직계 하위 항목 (직계 하위)이기 때문입니다 (물론 이러한 규칙을 재정의하는 다른 특정 규칙을 선언하지 않는 한). . 바이올린을 참조하십시오.
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>
사이드 노트
If you, instead, had a space between selectors instead of
>
, your rules would apply to both of the nested divs. The space is much more commonly used and defines a "descendant selector", which means it looks for any matching element down the tree rather than just immediate children as the >
does.
NOTE: The >
selector is not supported by IE6. It does work in all other current browsers though, including IE7 and IE8.
If you're looking into less-well-used CSS selectors, you may also want to look at +
, ~
, and [attr]
selectors, all of which can be very useful.
This page has a full list of all available selectors, along with details of their support in various browsers (its mainly IE that has problems), and good examples of their usage.
>
selects all direct descendants/children
A space selector will select all deep descendants whereas a greater than
>
selector will only select all immediate descendants. See fiddle for example.
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>
It is the CSS child selector. Example:
div > p
selects all paragraphs that are direct children of div.
See this
As others have said, it's a direct child, but it's worth noting that this is different to just leaving a space... a space is for any descendant.
<div>
<span>Some text</span>
</div>
div>span
would match this, but it would not match this:
<div>
<p><span>Some text</span></p>
</div>
To match that, you could do div>p>span
or div span
.
It is a Child Selector.
It matches when an element is the child of some element. It is made up of two or more selectors separated by ">".
Example(s):
The following rule sets the style of all P elements that are children of BODY:
body > P { line-height: 1.3 }
Example(s):
The following example combines descendant selectors and child selectors:
div ol>li p
It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.
It declares parent reference, look at this page for definition:
http://www.w3.org/TR/CSS2/selector.html#child-selectors
It means parent/child
example:
html>body
that's saying that body is a child of html
Check out: Selectors
참고URL : https://stackoverflow.com/questions/4459821/css-selector-what-is-it
'program tip' 카테고리의 다른 글
Git 푸시 결과 "인증 실패"가 발생합니다. (0) | 2020.10.04 |
---|---|
정보 손실없이 계수를 정수 \ 숫자로 변환하는 방법은 무엇입니까? (0) | 2020.10.04 |
Objective-C에서 객체 유형을 어떻게 테스트합니까? (0) | 2020.10.04 |
WOFF 글꼴의 MIME 유형? (0) | 2020.10.04 |
"정적 const"vs "#define"vs "enum" (0) | 2020.10.04 |