이 구문을 사용하는 요점은 무엇입니까
div.card > div.name
이것의 차이점은 무엇입니까
div.card div.name
답변
A > B
A의 직계 자식 인 B 만 선택합니다 (즉, 그 사이에 다른 요소는 없습니다).
A B
그들 사이에 다른 요소가 있더라도 A 안에있는 B를 선택합니다.
답변
>
는 IS 아이 선택기. 을 제외한 두 번째 예에서와 같이 직계 자식 요소 만 지정하고 하위 항목 (손자, 손자 등 포함)은 지정하지 않습니다 >
.
자식 선택기는 IE 6 이하에서 지원되지 않습니다. 훌륭한 호환성 표가 여기에 있습니다 .
답변
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'>
답변
A> B는 A의 직계 자녀 인 경우 B를 선택하고 AB는 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>
답변
> 우주
두 가지 시나리오 div > span { }
와div span { }
여기서, 요소가 다른 요소 안에 있더라도 요소의 <space>
모든 <span>
요소를 모두 선택합니다 <div>
. >는 <div>
요소의 모든 자식을 선택 하지만 다른 요소 안에있는 경우 선택합니다 .
> (보다 큼) :
div > span {
color: #FFBA00 ;
}
<body>
<div>
<p>
<span>Hello,</span>
</p>
<span>World!</span>
</div>
</body>
이것은 단지를 선택 <span>World!</span>
하고 <span>
내부 <p>
태그를 찾지 않습니다 .
우주
div span {
color: #FFBA00 ;
}
<body>
<div>
<p>
<span>Hello,</span>
</p>
<span>World!</span>
</div>
<body>
이 태그는 다른 범위 안에 중첩되어 있어도 모든 범위 태그를 선택합니다.