내 'n번째 하위' 선택기가 예상대로 작동하지 않는 이유는 무엇입니까?

nth-child가 제대로 작동하지 않는 이유는 무엇입니까?

nth-child 선택기는 CSS의 강력한 도구로 다음을 수행할 수 있습니다. 상위 요소 내의 위치에 따라 요소의 스타일을 지정합니다. 그러나 때로는 n번째 하위 선택기가 제대로 작동하지 않는 것 같은 문제가 발생할 수 있습니다.

이에 대한 가장 일반적인 이유 중 하나는 n번째 하위 선택기를 사용하여 형제가 아닌 요소를 선택합니다. n번째 하위 선택기는 형제를 계산합니다. 즉, 상위 요소가 동일한 요소만 고려합니다.

예를 들어 다음 HTML 코드에서 div.social-logo 요소는 모두 a의 하위 요소입니다. 요소가 있으므로 n번째 하위 선택기가 예상대로 작동하지 않습니다.

<code class="html"><div id="social-links">
  <a href=""><div class="social-logo"></div></a>
  <a href=""><div class="social-logo"></div></a>
  <a href=""><div class="social-logo"></div></a>
  <a href=""><div class="social-logo"></div></a>
</div></code>

이 문제를 해결하려면 n번째 하위 선택기를 사용하여 div.social-logo 요소 대신 a 요소를 선택해야 합니다. . 예를 들어, 다음 CSS 코드는 #social-links div 내의 첫 번째 요소 스타일을 지정합니다.

<code class="css">#social-links a:nth-child(1) {
  background-color: red;
}</code>

n번째 하위 선택기가 제대로 작동하지 않는 또 다른 이유는 잘못된 구문입니다. n번째 하위 선택기의 올바른 구문은 다음과 같습니다.

nth-child(n)

여기서 n은 선택하려는 요소의 위치입니다. 예를 들어, nth-child(1)는 첫 번째 요소를 선택하고, nth-child(2)는 두 번째 요소를 선택하는 방식으로 진행됩니다.

잘못된 구문을 사용하는 경우 nth-child 선택기는 제대로 작동하지 않습니다. 예를 들어 다음 CSS 코드는 작동하지 않습니다.

<code class="css">#social-links div:nth-child[1] {
  background-color: red;
}</code>

n번째 하위 선택기를 대괄호와 함께 사용할 수 없으므로 이 코드는 올바르지 않습니다. 대신 괄호를 사용해야 합니다.

이 팁을 따르면 CSS 코드에서 n번째 하위 선택기가 제대로 작동하는지 확인할 수 있습니다.

위 내용은 내 'n번째 하위' 선택기가 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!