다양한 상위 구조에 걸쳐 특정 중첩 요소의 스타일을 지정하는 방법은 무엇입니까?
- Barbara Streisand원래의
- 2024-10-23 23:05:30173검색
여러 상위 구조에 걸쳐 중첩된 n번째 하위 요소 스타일 지정
다양한 상위 구조 내에서 특정 중첩 요소의 스타일을 지정하는 솔루션을 찾으려면 다음 마크업을 고려하세요. :
<br><div class="foo"></p>
<pre class="brush:php;toolbar:false"><ul>
<li>one</li>
<li>two</li>
</ul>
<ul>
<li>three</li>
</ul>
<ul>
<li>four</li>
</ul>
목표는 각
- 의 첫 번째 자식인지 여부에 관계없이 "one"과 "3"에 스타일을 적용하는 것입니다.
- .foo 컨테이너 내의 요소:
<code class="javascript">$('.foo li:eq(0), .foo li:eq(2)')</code>명시적 요소 표시:
CSS를 통해 선택할 수 있도록 클래스나 ID로 원하는 요소를 명시적으로 표시할 수 있습니다. 예를 들어 첫 번째와 세 번째
- 요소:
<br><ul></p> <pre class="brush:php;toolbar:false"><li class="first">one</li> <li class="second">two</li>
:nth-child()의 제한 사항
:nth-child() 사용 시도는 동일한 상위를 공유하는 요소에만 적용되기 때문에 부족합니다. 이 시나리오에서 CSS 선택기 .foo li:nth-child(1), .foo li:nth-child(3)는 각
- 의 첫 번째 하위 항목만 대상으로 합니다.
대체 솔루션
JavaScript:
jQuery와 같은 라이브러리를 사용하면 JavaScript의 강력한 필터링 기능을 사용하여 요소를 선택할 수 있습니다. 예를 들어, 다음 스크립트는 첫 번째와 세 번째
<li class="third">three</li>
< ;/ul>
<li class="fourth">four</li>
그런 다음 CSS를 사용하여 표시된 요소를 타겟팅할 수 있습니다. :
<code class="css">.foo .first,
.foo .third {
color: red;
}</code>위 내용은 다양한 상위 구조에 걸쳐 특정 중첩 요소의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.