“>”(보다 큼) CSS 선택기는 무엇을 의미합니까?
답변:
>는 IS 아이 콤비 때로는 실수 직계 후손의 콤비라고는. 1
즉 셀렉터 수단은 div > p.some_class전용의 단락 선택 .some_class중첩 안에 직접div 아닌 내에 상기 중첩 된 임의의 단락.
삽화 :
<div>
<p class="some_class">Some text here</p> <!-- Selected [1] -->
<blockquote>
<p class="some_class">More text here</p> <!-- Not selected [2] -->
</blockquote>
</div>선택된 것과 그렇지 않은 것 :
선택
이것은p.some_class내부에 바로 위치div하므로 두 요소 사이에 부모-자식 관계가 설정됩니다.선택되지 않음
이것은 자체가 아니라 내부에p.some_class포함 됩니다. 이것은 의 자손 이지만 자식이 아닙니다. 손자입니다.blockquotedivdivp.some_classdiv따라서,이 동안
div > p.some_class,이 요소와 일치하지 않을div p.some_class사용한다 자손 연결자를 대신.
1 많은 사람들이 그것을 "직접 아이"또는 "즉시 아이"라고 부르지 만, 아이 요소 가 정의에 의해 즉시 정의 되기 때문에 그것은 완전히 불필요 합니다. "간접 자식"과 같은 것은 없습니다.
> (보다 큼)는 CSS 조합입니다.
결합기는 선택기 간의 관계를 설명하는 것입니다.
CSS 선택기는 둘 이상의 간단한 선택기를 포함 할 수 있습니다. 간단한 선택기 사이에 결합기를 포함시킬 수 있습니다.
CSS3에는 4 가지 조합이 있습니다 :
- 자손 선택기 (공백)
- 자식 선택기 (>)
- 인접한 형제 선택기 (+)
- 일반 형제 선택기 (~)
참고 : < CSS 선택기에는 유효하지 않습니다.
예를 들면 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>산출:
.entry-content > * {"code" }뒤에있는 .entry-content {"other code" }? 의 .entry-content > *모든 자녀를 다루지 entry-content않습니까?
다른 사람들이 언급했듯이, 그것은 어린이 선택기입니다. 적절한 링크는 다음과 같습니다.
<div>
<p class="some_class">lohrem text (it will be of red color )</p>
<div>
<p class="some_class">lohrem text (it will NOT be of red color)</p>
</div>
<p class="some_class">lohrem text (it will be of red color )</p>
</div>div > p.some_class{
color:red;
}<p>함께하는 모든 직계 자녀는 .some_class자신에게 적용되는 스타일을 갖습니다.
(자식 선택기)가 CSS2에 도입되었습니다. div p {}는 div 요소에 종속 된 모든 p 요소를 선택하는 반면, div> p는 자식이 아닌 자식 p 요소 만 선택합니다.
<style>
div p{ color:red } /* match both p*/
div > p{ color:blue } /* match only first p*/
</style>
<div>
<p>para tag, child and decedent of p.</p>
<ul>
<li>
<p>para inside list. </p>
</li>
</ul>
</div>CSS Ce [lectors와 그 사용법에 대한 자세한 내용은 내 블로그, css selectors 및 css3 selectors를 확인하십시오.
#something a어린이 선택기가 될 것이라고 생각했다 .