표준 목록을 사용하여 마지막 두 목록 항목을 선택하려고합니다. 나는 다양한 순열을 가지고 An+B있지만 마지막 2를 선택하는 것은 없습니다.
li:nth-child(n+2) {} /* selects from the second onwards */
li:nth-child(n-2) {} /* selects everything */
li:nth-child(-n+2) {} /* selects first two only */
li:nth-child(-n-2) {} /* selects nothing */나는 새로운 CSS3 선택자를 알고 :nth-last-child()있지만 가능한 경우 더 많은 브라우저에서 작동하는 것을 선호합니다 (IE에 대해서는 신경 쓰지 마십시오).
답변:
목록의 마지막 두 개의 iem이 선택됩니다.
li:nth-last-child(-n+2) {color:red;}<ul>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
</ul>:nth-last-child()이미 언급 한 것을 사용 하고 있습니다.
nth-last-child이 문제를 해결하기 위해 특별히 설계된 것처럼 들리므로 더 호환 가능한 대안이 있는지 의심합니다. 그래도 지원은 꽤 괜찮아 보입니다 .
의 의미론의 정의로 인해 nth-child관련된 요소 목록의 길이를 포함하지 않고 이것이 어떻게 가능한지 알 수 없습니다. 의미의 요점은 여러 하위 요소를 반복 그룹으로 편집 하거나 ( 편집 -BoltClock 덕분에) 고정 길이의 첫 부분으로, 나머지는 "나머지"로 분리하는 것입니다. 당신은 그 반대를 원합니다 nth-last-child. 그것이 당신에게주는 것입니다.
:nth-child()하여 첫 번째 m요소를 선택할 수 있습니다 :nth-child(-n+m).
프로젝트에서 jQuery를 사용하거나 포함 nth-last-child시키려는 경우 선택기 API를 통해 호출 할 수 있습니다 (이것은 브라우저를 통해 시뮬레이션 됨). 여기 링크입니다 에 nth-last-child플러그인. 관심있는 요소를 타겟팅하는이 방법을 사용한 경우 :
$('ul li:nth-last-child(1)').addClass('last');그런 다음 의사 또는 선택기 last대신 클래스를 다시 스타일링 하면 훨씬 일관된 크로스 브라우저 환경을 경험할 수 있습니다.nth-childnth-last-child
:nth-last-child()은:nth-child()quirksmode.org에 따른 것과 동일 합니다. 또한,:nth-child()및:nth-last-child()모두 CSS3에 도입되지, 어느 쪽도 그런 의미에서 이전 또는 새로운되었다.