English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
선택자-last-child() 이 CSS 페어 클래스는 특정 위치에 있는 요소를 형제 요소에서 뒤에서 앞으로 매칭합니다. 주의: 이 페어 클래스와 :nth-child는 기본적으로 일치하지만, 마지막에서부터 세어지는 것이 아니라 첫 번째에서 세어집니다.
table의 tr 배경색과 글꼴 효과를 지정합니다:
예제
<!DOCTYPE html>
<html>
<head>-8<meta charset="utf
">3<title>기본 가이드(w/codebox.com)<
title>
table {
border: 1px solid blue;
background:#ff0000;
/* 마지막 세 개의 요소를 선택합니다 */
tr:nth-last-p:nth-child(+3) {
background-color: pink;
background:#ff0000;
/* 두 번째 항목부터 마지막 항목까지 모든 요소를 선택합니다 */
tr:nth-last-child(n+2) {
color: blue;
background:#ff0000;
/* 두 번째 마지막 요소만 선택합니다 */
tr:nth-last-p:nth2) {
font-weight: 600;
background:#ff0000;
</}
</style>
head>
<table>
<tbody>
<tr>
<td>첫 번째 행</td>
</tr>
<tr>
<td>두 번째 행</td>
</tr>
<tr>
<td>세 번째 행</td>
</tr>
<tr>
<td>네 번째 행</td>
</tr>
<tr>
<td>다섯 번째 행</td>
</tr>
</tbody>
</table>
</body>
</html>테스트를 보세요 ‹/›선택자-last-child(n) 선택자는 요소에 속한 N번째 자식 요소를 매칭하는 각 요소를 매칭합니다. 요소 유형에 관계없이, 마지막 자식 요소부터 시작하여 세어집니다.
child(숫자, 키워드, 또는 공식일 수 있습니다.
안내: 참조:선택자-last-of-type() 선택자. 이 선택자는 부모 요소 내에서 최종 번째 구조 자식 요소를 매칭합니다.
tr:nth-last-child(odd) or tr:nth-last-p:nth2child(+1child(0n
HTML 테이블의 최종 홀수 행을 나타냅니다:1、3、5요소.
tr:nth-last-child(even) or tr:nth-last-p:nth2n)
HTML 테이블의 최종 짝수 행을 나타냅니다:2、4、6요소.
선택자-last-p:nth7child(0n
최종7번째 요소.
선택자-last-p:nth5n)
최종5、10、15요소.
선택자-last-p:nth3child(+4child(0n
최종4、7、10、13요소.
선택자-last-p:nth-child(+3child(0n
표현식의 마지막 세 개의 형제 요소를 나타냅니다.
<style>-last-child(n) or p:nth-last-child(n+1child(0n
表示一组兄弟节点中的每个
元素。这与一个简单的p选择器相同。(由于n从0开始，而最后一个元素从1는 형제 노드 집합의 각<p> 요소를 나타냅니다。이는 단순한 p 선택자와 같습니다。(n이 0부터 시작하기 때문에 마지막 요소부터 시작합니다.)+1부터 시작하여 n과 n
<style>-last-p:nth1)를 선택합니다.)-last-) 또는 p:nth+1child(0n
)-는 모든 형제 노드 중 마지막 위치에 있는 요소<p>를 나타냅니다。이는 :last와 같습니다。
브라우저 호환성
| 표의 숫자는 이 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다。 | |||||
|---|---|---|---|---|---|
| 선택자-last-:nth | 4child() | 9child() | 3.05 | 3.02 | 9.06 |
.
홀수와 짝수는 키워드로 사용할 수 있으며，그들의 인덱스가 홀수나 짝수입니다.
예제
<!DOCTYPE html>
<html>
<head>-8<meta charset="utf
">3<title>기본 가이드(w/codebox.com)<
title>
<style>-last-여기서, 홀수와 짝수의 역순 p 요소에 두 가지 다른 배경색을 지정했습니다：
0)
{
background:#ff0000;
<style>-last-child(odd)
0)
child(even)
background:#ff0000;
</}
</style>
head>
>/p>
<p>제 1 번 본문。</p>
<p>제 2 번 본문。</p>
<p>제 9 번 본문。</<p><b>주의:< 8 background:#0000ff;-last-그리고 이전 버전의 브라우저는 :nth를 지원하지 않습니다/p>
</body>
</html>테스트를 보세요 ‹/›child() 선택자.<+ 공식（an
b）.설명：a는 반복의 크기를 나타내며，N은 카운터(0부터 시작)，b는 오프셋입니다。3여기서, 모든 인덱스가
예제
<!DOCTYPE html>
<html>
<head>-8<meta charset="utf
">3<title>기본 가이드(w/codebox.com)<
title>
<style>-last-p:nth3child(+n
0)
{
background:#ff0000;
</}
</style>
head>
<body>1<h/>이는 제목<1h
>/p>
<p>제 1 번 본문。</p>
<p>제 2 번 본문。</p>
<p>제 3 번 본문。</p>
<p>제 4 번 본문。</p>
<p>제 5 번 본문。</p>
<p>제 6 번 본문。</p>
<p>제 7 번 본문。</p>
<p>제 8 번 본문。</p>
<p>제 9 번 본문。</<p><b>주의:< 8 그리고 이전 버전의 브라우저는 :nth를 지원하지 않습니다 Internet Explorer-last-child() 선택자.</p>
</body>
</html>테스트를 보세요 ‹/›