n번째 유형/n번째 하위 선택자가 중첩된 요소에 영향을 주지 않는 이유는 무엇입니까?
P粉237689596
2023-08-24 16:07:18
<p>하나의 div 내에 중첩된 홀수 개의 div의 스타일을 변경하려고 합니다. 어떤 이유로 <code>nth-of-type(odd)</code>가 다른 div 내에 중첩되면 모든 div에 영향을 미칩니다. 다음은 일반 div와 홀수 div에 대한 코드입니다. </p>
<p>
<pre class="brush:css;toolbar:false;">.video-entry-summary {
너비: 214px;
높이: 210px;
왼쪽 여백: 10px;
왼쪽으로 뜨다;
위치: 상대;
오버플로: 숨김;
테두리: 1px 단색 검정;
}
.video-entry-summary:n번째 유형(홀수) {
너비: 214px;
높이: 210px;
왼쪽 여백: 0px;
왼쪽으로 뜨다;
위치: 상대;
오버플로: 숨김;
테두리: 1px 단색 검정;
배경: #ccc;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="post-501" class="post-501 게시물 유형-게시 상태-게시 형식-표준 hentry 카테고리-moto-dz- 영화 tag-news-sub-2">
<div class="video-entry-summary">
비디오 1
</div>
</div>
<div id="post-240" class="post-240 게시물 유형-게시 상태-게시 형식-표준 헨트리 카테고리-동영상">
<div class="video-entry-summary">
비디오 2
</div>
</div>
<div id="post-232" class="post-232 게시물 유형-게시 상태-게시 형식-표준 헨리 카테고리-동영상">
<div class="video-entry-summary">
비디오 3
</div>
</div>
<div id="post-223" class="post-223 게시물 유형-게시 상태-게시 형식-표준 헨트리 카테고리-동영상">
<div class="video-entry-summary">
비디오 4
</div>
</p>
<p>어떤 이유에서인지 <code>nth-of-type</code>은 div 내에 중첩되어 있으면 작동하지 않지만 어떤 div에도 중첩되어 있지 않으면 작동합니다. </p>
<p><strong>div 내에 중첩되지 않은 경우 작동 버전: </strong></p>
<p>
<pre class="brush:css;toolbar:false;">.video-entry-summary {
너비: 214px;
높이: 210px;
왼쪽 여백: 10px;
왼쪽으로 뜨다;
위치: 상대;
오버플로: 숨김;
테두리: 1px 단색 검정;
}
.video-entry-summary:n번째 유형(홀수) {
너비: 214px;
높이: 210px;
왼쪽 여백: 0px;
왼쪽으로 뜨다;
위치: 상대;
오버플로: 숨김;
테두리: 1px 단색 검정;
배경: #ccc;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="video-entry-summary">
비디오 1
</div>
<div class="video-entry-summary">
비디오 2
</div>
<div class="video-entry-summary">
비디오 3
</div>
<div class="video-entry-summary">
비디오 4
</p>
<p>초기코드를 위와 동일하게 만들려면 어떻게 해야 하나요? </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
으아악:nth-of-type()和:nth-child()类似，它们都必须来自同一个父元素。如果你需要这些包装的div，请在这些包装上使用:nth-of-type()：모든 형제 요소가
.post，请使用:nth-child()来避免与:nth-of-type()Confusing의 진정한 의미인 경우: 으아악