">"(표시보다 큼) CSS 선택기는 무엇을 의미합니까?
예:
div > p.some_class {
/* Some declarations */
}
정확히 무엇을 하는 것입니까?>수화 평균?
>하위 결합자이며, 직접 1결합자로 잘못 불리기도 합니다.
즉, 셀렉터가div > p.some_class의 단락만 일치합니다..some_class바로 내부에 내포된 것들div더 안쪽에 내포된 단락은 없습니다.이는 모든 요소가 일치한다는 것을 의미합니다.div > p.some_class또한 반드시 일치합니다.div p.some_class하위 결합자(공간)와 함께, 따라서 두 가지는 이해할 수 있을 만큼 자주 혼동됩니다.
하위 조합과 하위 조합을 비교하는 그림:
div > p.some_class {
background: yellow;
}
div p.some_class {
color: red;
}<div>
<p class="some_class">Some text here</p> <!-- [1] div > p.some_class, div p.some_class -->
<blockquote>
<p class="some_class">More text here</p> <!-- [2] div p.some_class -->
</blockquote>
</div>어떤 요소가 어떤 셀렉터와 일치합니까?
둘 다 일치함
div > p.some_class그리고.div p.some_class
이것.p.some_class바로 안쪽에 위치합니다.div따라서 두 요소 사이에 부모-자녀 관계가 설정됩니다."하위"는 "하위" 유형이므로 모든 하위 요소는 정의상 하위 요소이기도 합니다.따라서 두 규칙이 모두 적용됩니다.일치자만
div p.some_class
이것.p.some_class에 의해 포함됩니다.blockquote의 내부에div보다도div그 자체로비록 이것은p.some_class의 후손입니다.div그것은 아이가 아니라 손자입니다.따라서 선택기에 하위 조합이 있는 규칙만 적용됩니다.
1 많은 사람들이 그것을 "직접적인 아이" 또는 "즉각적인 아이"라고 부르기 위해 더 나아가지만, 그것은 완전히 불필요합니다(그리고 저에게 엄청나게 성가신 일입니다), 왜냐하면 어쨌든 어린이 요소는 정의상으로 즉시 존재하기 때문에, 그들은 정확히 같은 의미를 가지고 있기 때문입니다."간접적인 아이" 같은 것은 없습니다.
>(보다 큰 부호)는 CSS 콤비네이터입니다.
결합기는 선택기 간의 관계를 설명하는 것입니다.
CSS 선택기는 둘 이상의 단순 선택기를 포함할 수 있습니다.단순 선택기 사이에 결합기를 포함할 수 있습니다.
CSS3에는 네 가지 다른 조합자가 있습니다.
- 하위 선택기(공백)
- 하위 선택기(>)
- 인접 형제 선택기(+)
- 일반형제자매선택기(~)
참고: <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>
출력:
다른 사람들이 언급했듯이, 그것은 어린이 선택기입니다.여기 적절한 링크가 있습니다.
http://www.w3.org/TR/CSS2/selector.html#child-selectors
일치합니다.p가 클스가인 some_class바로 아래에 있는 것들.div.
든모.p가 클스가인 some_class그들은 a의 직계 자식들입니다.div꼬리표를 달다
(자녀 선택기)는 css2에 도입되었습니다.
div pp , div 소 의 하 요 모 를 p선 하 는 반 면 택 소 요 든 요 위 소 인 ▁select 면 , 반 ▁all 는 ▁elements 하 ▁p ▁element ▁div , ▁whodiv > p손자, 손녀가 아닌 자식 요소만 선택합니다.
<style>
div p{ color:red } /* match all p in div */
div > p{ color:blue } /* match only children p of div*/
</style>
<div>
<p>para tag, child and decedent of p.</p>
<ul>
<li>
<p>para inside list. </p>
</li>
</ul>
<p>para tag, child and decedent of p.</p>
</div>
CSS Ce[lectors 및 그 사용에 대한 자세한 내용은 내 블로그, CSS Selectors 및 CSS3 Selectors를 확인하십시오.
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>
div > p.some_class{
color:red;
}
모든 직접적인 아이들은<p>와 함께.some_class그들에게 스타일을 적용할 것입니다.
CSS에서 더 큰 기호( > ) 선택기는 오른쪽의 선택기가 왼쪽에 있는 모든 것의 직계 후손임을 의미합니다.
예:
article > p { }
기사 뒤에 오는 문단의 스타일만 의미합니다.
언급URL : https://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean
'sourcecode' 카테고리의 다른 글
| 이름을 가진 커서가 이미 존재하는 이유는 무엇입니까? (0) | 2023.08.01 |
|---|---|
| PL/SQL에서 날짜 범위에 걸쳐 반복하는 방법 (0) | 2023.07.27 |
| PHP에서 "비등한" 연산자 <>와 !=의 차이 (0) | 2023.07.27 |
| Spring Boot과 함께 dotenv 파일 사용 (0) | 2023.07.27 |
| mysql에서 float를 이중으로 변환하는 데 중요한 숫자를 처리하는 데 문제 (0) | 2023.07.27 |