programing

n번째 아이가 있는 마지막 n개 항목을 선택할 수 있습니까?

topblog 2023. 8. 26. 10:16
반응형

n번째 아이가 있는 마지막 n개 항목을 선택할 수 있습니까?

저는 표준 목록을 사용하여 마지막 두 개의 목록 항목을 선택하려고 합니다.나는 다양한 순열을 가지고 있습니다.An+B하지만 마지막 두 가지를 선택한 것 같지는 않습니다.

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는 특별히 신경 쓰지 않습니다).

목록의 마지막 두 항목이 선택됩니다.

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>
</ul>

nth-last-child이 문제를 해결하기 위해 특별히 고안된 것처럼 들리기 때문에 더 호환 가능한 대안이 있는지 의심스럽습니다.하지만 지원은 꽤 괜찮은같습니다.

:nth-last-child(-n+2)방법을 강구해야 합니다.

의 의미의 정의 때문에nth-child관련 요소 목록의 길이를 포함하지 않고 어떻게 이것이 가능한지 모르겠습니다.의미론의 요점은 하위 요소 묶음을 반복 그룹(편집 - 감사 볼트 시계)으로 분리하거나 고정된 길이의 첫 번째 부분으로 분리한 다음 "나머지"로 분리할 수 있도록 하는 것입니다.당신은 그것과 반대의 것을 원하는 것입니다, 그것이 바로.nth-last-child당신에게 줍니다.

프로젝트에서 jQuery를 사용하고 있거나 포함할 의향이 있는 경우 전화로 문의할 수 있습니다.nth-last-child선택기 API(이것은 브라우저를 통과할 것으로 시뮬레이션됨)를 통해 제공됩니다.다음 링크는 다음과 같습니다.nth-last-child플러그인관심 있는 요소를 대상으로 하는 이 방법을 사용한 경우:

$('ul li:nth-last-child(1)').addClass('last');

그리고 나서 다시 스타일링합니다.last수업 대신 수업nth-child또는nth-last-child유사 선택기를 사용하면 훨씬 더 일관된 교차 브라우저 경험을 경험할 수 있습니다.

언급URL : https://stackoverflow.com/questions/4844456/is-it-possible-to-select-the-last-n-items-with-nth-child

반응형