여러 상위 구조에 걸쳐 중첩된 n번째 하위 요소 스타일 지정
다양한 상위 구조 내에서 특정 중첩 요소의 스타일을 지정하는 솔루션을 찾으려면 다음 마크업을 고려하세요. :
<br><div class="foo"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul>
<li>one</li>
<li>two</li>
</ul>
<ul>
<li>three</li>
</ul>
<ul>
<li>four</li>
</ul>목표는 각
:nth-child()의 제한 사항
:nth-child() 사용 시도는 동일한 상위를 공유하는 요소에만 적용되기 때문에 부족합니다. 이 시나리오에서 CSS 선택기 .foo li:nth-child(1), .foo li:nth-child(3)는 각
대체 솔루션
JavaScript:
jQuery와 같은 라이브러리를 사용하면 JavaScript의 강력한 필터링 기능을 사용하여 요소를 선택할 수 있습니다. 예를 들어, 다음 스크립트는 첫 번째와 세 번째
<code class="javascript">$('.foo li:eq(0), .foo li:eq(2)')</code>명시적 요소 표시:
CSS를 통해 선택할 수 있도록 클래스나 ID로 원하는 요소를 명시적으로 표시할 수 있습니다. 예를 들어 첫 번째와 세 번째
<br><ul></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><li class="first">one</li> <li class="second">two</li>
<li class="third">three</li>
< ;/ul>
<li class="fourth">four</li>
그런 다음 CSS를 사용하여 표시된 요소를 타겟팅할 수 있습니다. :
<code class="css">.foo .first,
.foo .third {
color: red;
}</code>위 내용은 다양한 상위 구조에 걸쳐 특정 중첩 요소의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
