CSS 셀렉터에서 '>'와 공백의 차이점은 무엇입니까?
이 구문을 사용하는 이유는 무엇입니까?
div.card > div.name
이것과 무엇이 다릅니까?
div.card div.name
A > B에서는 A에 직접 연결된 자식인 B만 선택합니다(즉, 그 사이에 다른 요소가 없음).
A B는 A 내부에 있는 모든 B를 선택합니다. 두 B 사이에 다른 요소가 있는 경우에도 마찬가지입니다.
>하위 선택기입니다.직접 하위 요소만 지정합니다.
공백( )는 하위 선택기입니다.모든 후손(손주, 손주 등)을 지정합니다.
하위 선택기는 IE 6 이하에서 지원되지 않습니다.훌륭한 호환성 표가 여기 있습니다.
> 대 공간
두 가지 시나리오를 고려합니다.div > span { }대.div span { }
자, 그. (space) 모든 항목을 선택합니다.<span>내부의 요소들<div>두 개 이상의 요소 내부에 내포된 경우에도 요소.>의 모든 자식을 선택합니다.<div>요소가 다른 요소 안에 있지 않은 경우.
두 가지 예를 살펴보겠습니다.
> (보다 큼):
div > span {
color: #FFBA00 ;
}<body>
<div>
<div>
<span>Hello...</span>
<p><span>Hello!</span></p>
</div>
<span>World!</span>
</div>
</body>이것은 단지 선택할 뿐입니다.<span>Hello...</span>(내스트 직후이기 때문에)div태그) 및<span>World!</span>그리고 그것은 찾지 않을 것입니다.<span>안에서.<p>직후가 아니기 때문에 태그 지정div꼬리표를 달다
공간
div span {
color: #0A0 ;
}<body>
<div>
<div>
<span>Hello...</span>
<p><span>Hello!</span></p>
</div>
<span>World!</span>
</div>
</body>이 태그는 다른 태그 내부에 중첩되어 있더라도 모든 범위 태그를 선택합니다.
div.card > div.name성냥<div class='card'>....<div class='name'>xxx</div>...</div>하지만 일치하지 않습니다.<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>
div.card div.name둘 다 일치합니다.
즉,>선택기는 선택된 요소가 오른쪽에 있는지 확인합니다.>왼쪽에 있는 요소의 직계 하위 항목입니다.
다음을 제외한 구문>일치하는 항목<div class='name'>그것은 (어린이뿐만 아니라)의 후손입니다.<div class='card'>.
B는 A의 직계 자녀라면 B를 선택하고, B는 B의 직계 자녀라면 B를 선택합니다.
<p> USING SPACE </p>
<style>
.a .b {
background-color: red;
}
</style>
<span class="a">
a
<br>
<span class="b"> a b</span>
<br>
<span class="c">
<span class="b"> a b c</span>
</span>
</span>
<br><br>
<p> USING GREATER THAN SIGN</p>
<style>
.x > .y {
background-color: red;
}
</style>
<span class="x">
x
<br>
<span class="y"> x y</span>
<br>
<span class="z">
<span class="y"> x y z</span>
</span>
</span>언급URL : https://stackoverflow.com/questions/2636379/what-is-the-difference-between-and-a-space-in-css-selectors
'programing' 카테고리의 다른 글
| phpmyadmin에서 mySQL 서버 IP 주소를 찾는 방법 (0) | 2023.09.04 |
|---|---|
| 유닛 테스트를 실행하는 동안 mariadb를 시작하는 방법 (0) | 2023.09.04 |
| 클라이언트 브라우저에서 Amazon S3 직접 파일 업로드 - 개인 키 노출 (0) | 2023.09.04 |
| 개발 환경에서 윈도우즈 7 x64의 C#에서 오라클 데이터베이스에 연결하는 방법 (0) | 2023.09.04 |
| 동적 열에서 하위 데이터를 가져오는 방법은 무엇입니까? (0) | 2023.09.04 |