> 웹 프론트엔드 > JS 튜토리얼 > jquery 선택기: first-child 및 :last-child가 요소에 대한 솔루션을 얻을 수 없습니다.

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

黄舟
풀어 주다: 2017-06-23 15:01:29
원래의
2119명이 탐색했습니다.

실제 코드 예제를 통해 이 문제를 해결하는 방법을 소개하겠습니다. 다음과 같은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿