내 태그에 대해 임의의 클래스 이름을 생성하는 CSS 모듈을 사용합니다. 하위 항목을 선택하지 않고 특정 유형의 요소를 선택하려면 어떻게해야합니까? 지금까지 사용 선택기에 시도한 :first-of-type과 :first-child같이 :
.settings ul:first-of-type > i:first-child {
opacity: 0.5;
}
그러나 그 결과 내 규칙이 <i>내 페이지의 모든 요소에 적용됩니다 .
HTML :
<div class="settings">
<ul>
<li>
<i>Select this element</i>
<ul>
<li>
<i>but not this one</i>
<span></span>
</li>
<li>
<i>or not this one</i>
<span></span>
</li>
</ul>
</li>
</ul>
</div>
CSS 자식 결합 자 사용 >:
.settings > ul > li > i {
opacity: 0.5;
}<div class="settings">
<ul>
<li>
<i>Select this element</i>
<ul>
<li>
<i>but not this one</i>
<span></span>
</li>
<li>
<i>or not this one</i>
<span></span>
</li>
</ul>
</li>
</ul>
</div>자식 결합 자 (
>)는 두 CSS 선택자 사이에 배치됩니다. 첫 번째와 일치하는 요소의 직접 자식 인 두 번째 선택기와 일치하는 요소 만 일치합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다