jquery 선택기: first-child 및 :last-child가 요소에 대한 솔루션을 얻을 수 없습니다.

실제 코드 예제를 통해 이 문제를 해결하는 방법을 소개하겠습니다. 다음과 같은 HTML 코드가 있다면

<a href="#" class="button"><</a>
<a href="#" class="button">></a>
<div id="f">F</div>
<div id="s">S</div>
<div id="t">T</div>

클래스 버튼이 있는 마지막 a 태그를 찾아야 하며, CSS3pseudo-class에 대해 알고 있는 내용에 따르면 다음 코드를 쉽게 작성할 수 있습니다.

.button:last-child {
    background-color: #ffd700;
}

실행해 보니 두 번째 a의 배경색이 바뀌지 않았습니다. 생각해 보니 CSS 코드가 몇 개 이상 잘못된 것 같습니다. 수정 사항이 있어서 HTML과 CSS를 이것으로 변경하면 됩니다.

<div>
<a href="#" class="button"><</a>
<a href="#" class="button">></a>
</div>
<div id="f">F</div>
<div id="s">S</div>
<div id="t">T</div>
<style>
div .button:last-child {
    background-color: #ffd700;
}
</style>

그러다가 갑자기 첫 번째 자식과 마지막 자식이 매우 오만하고 고의적이라는 것을 깨달았습니다. 아버지 요소의 자식 요소에 다른 태그가 포함되어 있으면 매우 불순종할 것입니다.

요약

그럼 무엇을 듣고 무엇을 듣지 않았을까요? 몇번의 테스트를 거친 후 결론은

처음 사용할 때 첫 번째 하위 요소의 레이블이 동일해야 합니다. 중간과 끝이 다를 수 있고,
끝이 반대이고, 마지막 요소가 같아야 하며, 앞과 중간이 다를 수 있습니다

위는 Yunqi 커뮤니티 편집자가 여러분을 위해 신중하게 준비한 콘텐츠입니다. 블로그, Q&A, 공개 계정, 캐릭터, 강좌 및 기타 항목에도 관련 콘텐츠가 있습니다. 계속해서 오른쪽 상단의 검색 버튼을 사용하여 CSS를 검색해 보세요. jquery last child, jquery firstchild, jquery first child, jquery first last, 편의상 더 관련 있는 지식을 얻을 수 있습니다.

위 내용은 jquery 선택기: first-child 및 :last-child가 요소에 대한 솔루션을 얻을 수 없습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!