[css] “>”(보다 큼) CSS 선택기는 무엇을 의미합니까?

예를 들면 다음과 같습니다.

div > p.some_class {
  /* Some declarations */
}

이 >표시는 정확히 무엇을 의미합니까?

답변

>는 IS 아이 콤비 때로는 실수 직계 후손의 콤비라고는. ¹

즉 셀렉터 수단은 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사용한다 자손 연결자를 대신.

¹ _{많은 사람들이 그것을 “직접 아이”또는 “즉시 아이”라고 부르지 만, 아이 요소 가 정의에 의해 즉시 정의 되기 때문에 그것은 완전히 불필요 합니다. “간접 자식”과 같은 것은 없습니다.}

답변

> (보다 큼)는 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>

산출:

CSS 조합에 대한 추가 정보

답변

다른 사람들이 언급했듯이, 그것은 어린이 선택기입니다. 적절한 링크는 다음과 같습니다.

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

답변

그것은 일치하는 p클래스 요소 some_class입니다 바로 아래에있는 A를 div.

답변

p태그의 some_class직접적인 자식 인 클래스가 있는 모든 div태그.

답변

html

<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>

CSS

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를 확인하십시오.