Hướng dẫn css last child - 1 - css con cuối cùng - 1

Các lớp giả CSS của CSS phù hợp với các yếu tố dựa trên vị trí của họ giữa một nhóm anh chị em, đếm từ cuối.:nth-last-child() CSS pseudo-class matches elements based on their position among a group of siblings, counting from the end.

Thử nó

Cú pháp

Phân loại giả nth-last-child được chỉ định với một đối số duy nhất, đại diện cho mẫu cho các phần tử phù hợp, đếm từ cuối.

:nth-last-child(  [ of  ]? )

Giá trị từ khóa

odd

Đại diện cho các yếu tố có vị trí số trong một loạt anh chị em là lẻ: 1, 3, 5, v.v., đếm từ cuối.

even

Đại diện cho các yếu tố có vị trí số trong một loạt các anh chị em thậm chí là: 2, 4, 6, v.v., đếm từ cuối.

Ký hiệu chức năng

Đại diện cho các yếu tố có vị trí số trong một loạt các anh chị em phù hợp với mẫu

<table>
  <tbody>
    <tr>
      <td>First linetd>
    tr>
    <tr>
      <td>Second linetd>
    tr>
    <tr>
      <td>Third linetd>
    tr>
    <tr>
      <td>Fourth linetd>
    tr>
    <tr>
      <td>Fifth linetd>
    tr>
  tbody>
table>
0, cho mỗi số nguyên dương hoặc giá trị bằng không của
<table>
  <tbody>
    <tr>
      <td>First linetd>
    tr>
    <tr>
      <td>Second linetd>
    tr>
    <tr>
      <td>Third linetd>
    tr>
    <tr>
      <td>Fourth linetd>
    tr>
    <tr>
      <td>Fifth linetd>
    tr>
  tbody>
table>
1. Chỉ số của phần tử đầu tiên, đếm từ cuối, là
<table>
  <tbody>
    <tr>
      <td>First linetd>
    tr>
    <tr>
      <td>Second linetd>
    tr>
    <tr>
      <td>Third linetd>
    tr>
    <tr>
      <td>Fourth linetd>
    tr>
    <tr>
      <td>Fifth linetd>
    tr>
  tbody>
table>
2. Các giá trị
<table>
  <tbody>
    <tr>
      <td>First linetd>
    tr>
    <tr>
      <td>Second linetd>
    tr>
    <tr>
      <td>Third linetd>
    tr>
    <tr>
      <td>Fourth linetd>
    tr>
    <tr>
      <td>Fifth linetd>
    tr>
  tbody>
table>
3 và
<table>
  <tbody>
    <tr>
      <td>First linetd>
    tr>
    <tr>
      <td>Second linetd>
    tr>
    <tr>
      <td>Third linetd>
    tr>
    <tr>
      <td>Fourth linetd>
    tr>
    <tr>
      <td>Fifth linetd>
    tr>
  tbody>
table>
4 phải là
<table>
  <tbody>
    <tr>
      <td>First linetd>
    tr>
    <tr>
      <td>Second linetd>
    tr>
    <tr>
      <td>Third linetd>
    tr>
    <tr>
      <td>Fourth linetd>
    tr>
    <tr>
      <td>Fifth linetd>
    tr>
  tbody>
table>
5s.

Ví dụ

Ví dụ bộ chọn

<table>
  <tbody>
    <tr>
      <td>First linetd>
    tr>
    <tr>
      <td>Second linetd>
    tr>
    <tr>
      <td>Third linetd>
    tr>
    <tr>
      <td>Fourth linetd>
    tr>
    <tr>
      <td>Fifth linetd>
    tr>
  tbody>
table>
6 hoặc
<table>
  <tbody>
    <tr>
      <td>First linetd>
    tr>
    <tr>
      <td>Second linetd>
    tr>
    <tr>
      <td>Third linetd>
    tr>
    <tr>
      <td>Fourth linetd>
    tr>
    <tr>
      <td>Fifth linetd>
    tr>
  tbody>
table>
7

Đại diện cho các hàng lẻ của một bảng HTML: 1, 3, 5, v.v., đếm từ cuối.

<table>
  <tbody>
    <tr>
      <td>First linetd>
    tr>
    <tr>
      <td>Second linetd>
    tr>
    <tr>
      <td>Third linetd>
    tr>
    <tr>
      <td>Fourth linetd>
    tr>
    <tr>
      <td>Fifth linetd>
    tr>
  tbody>
table>
8 hoặc
<table>
  <tbody>
    <tr>
      <td>First linetd>
    tr>
    <tr>
      <td>Second linetd>
    tr>
    <tr>
      <td>Third linetd>
    tr>
    <tr>
      <td>Fourth linetd>
    tr>
    <tr>
      <td>Fifth linetd>
    tr>
  tbody>
table>
9

Đại diện cho các hàng chẵn của một bảng HTML: 2, 4, 6, v.v., đếm từ cuối.

table {
  border: 1px solid blue;
}

/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
  color: blue;
}

/* Select only the last second element */
tr:nth-last-child(2) {
  font-weight: 600;
}
0

Đại diện cho yếu tố thứ bảy, đếm từ cuối.

table {
  border: 1px solid blue;
}

/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
  color: blue;
}

/* Select only the last second element */
tr:nth-last-child(2) {
  font-weight: 600;
}
1

Đại diện cho các yếu tố 5, 10, 15, v.v., đếm từ cuối.

table {
  border: 1px solid blue;
}

/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
  color: blue;
}

/* Select only the last second element */
tr:nth-last-child(2) {
  font-weight: 600;
}
2

Đại diện cho các yếu tố 4, 7, 10, 13, v.v., đếm từ cuối.

table {
  border: 1px solid blue;
}

/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
  color: blue;
}

/* Select only the last second element */
tr:nth-last-child(2) {
  font-weight: 600;
}
3

Đại diện cho ba yếu tố cuối cùng trong số một nhóm anh chị em.

table {
  border: 1px solid blue;
}

/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
  color: blue;
}

/* Select only the last second element */
tr:nth-last-child(2) {
  font-weight: 600;
}
4 hoặc
table {
  border: 1px solid blue;
}

/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
  color: blue;
}

/* Select only the last second element */
tr:nth-last-child(2) {
  font-weight: 600;
}
5

Đại diện cho mọi yếu tố

table {
  border: 1px solid blue;
}

/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
  color: blue;
}

/* Select only the last second element */
tr:nth-last-child(2) {
  font-weight: 600;
}
6 giữa một nhóm anh chị em. Điều này giống như một bộ chọn
table {
  border: 1px solid blue;
}

/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
  color: blue;
}

/* Select only the last second element */
tr:nth-last-child(2) {
  font-weight: 600;
}
7 đơn giản. .

<h4>A list of four items (styled):h4>
<ol>
  <li>Oneli>
  <li>Twoli>
  <li>Threeli>
  <li>Fourli>
ol>

<h4>A list of two items (unstyled):h4>
<ol>
  <li>Oneli>
  <li>Twoli>
ol>
1 hoặc
<h4>A list of four items (styled):h4>
<ol>
  <li>Oneli>
  <li>Twoli>
  <li>Threeli>
  <li>Fourli>
ol>

<h4>A list of two items (unstyled):h4>
<ol>
  <li>Oneli>
  <li>Twoli>
ol>
2

Đại diện cho mỗi

table {
  border: 1px solid blue;
}

/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
  color: blue;
}

/* Select only the last second element */
tr:nth-last-child(2) {
  font-weight: 600;
}
6 là yếu tố đầu tiên trong số một nhóm anh chị em, đếm từ cuối. Điều này giống như bộ chọn
<h4>A list of four items (styled):h4>
<ol>
  <li>Oneli>
  <li>Twoli>
  <li>Threeli>
  <li>Fourli>
ol>

<h4>A list of two items (unstyled):h4>
<ol>
  <li>Oneli>
  <li>Twoli>
ol>
4.

Ví dụ bảng

HTML

<table>
  <tbody>
    <tr>
      <td>First linetd>
    tr>
    <tr>
      <td>Second linetd>
    tr>
    <tr>
      <td>Third linetd>
    tr>
    <tr>
      <td>Fourth linetd>
    tr>
    <tr>
      <td>Fifth linetd>
    tr>
  tbody>
table>

CSS

table {
  border: 1px solid blue;
}

/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
  color: blue;
}

/* Select only the last second element */
tr:nth-last-child(2) {
  font-weight: 600;
}

Kết quả

Truy vấn số lượng

Một yếu tố kiểu truy vấn số lượng tùy thuộc vào số lượng trong số chúng có. Trong ví dụ này, danh sách các mục chuyển sang màu đỏ khi có ít nhất ba trong số chúng trong một danh sách nhất định. Điều này được thực hiện bằng cách kết hợp các khả năng của lớp giả và bộ kết hợp anh chị em chung.

HTML

<h4>A list of four items (styled):h4>
<ol>
  <li>Oneli>
  <li>Twoli>
  <li>Threeli>
  <li>Fourli>
ol>

<h4>A list of two items (unstyled):h4>
<ol>
  <li>Oneli>
  <li>Twoli>
ol>

CSS

/* If there are at least three list items,
   style them all */
li:nth-last-child(n + 3),
li:nth-last-child(3) ~ li {
  color: red;
}

Kết quả

Truy vấn số lượng

Một yếu tố kiểu truy vấn số lượng tùy thuộc vào số lượng trong số chúng có. Trong ví dụ này, danh sách các mục chuyển sang màu đỏ khi có ít nhất ba trong số chúng trong một danh sách nhất định. Điều này được thực hiện bằng cách kết hợp các khả năng của lớp giả và bộ kết hợp anh chị em chung.
Thông số kỹ thuật
# nth-last-child-pseudo

Sự chỉ rõ

Thông số kỹ thuật không xác định # thứ n-last-child-pseudo

Tính tương thích của trình duyệt web

Làm thế nào để bạn nhắm mục tiêu đứa trẻ cuối cùng trong CSS?

CSS: Bộ chọn-con cuối cùng..
Định nghĩa và cách sử dụng. : Bộ chọn-con cuối cùng khớp với mọi yếu tố là con cuối cùng của cha mẹ. Mẹo: P: Last-Chill bằng P: Nth-Last-Child (1). ....
Hỗ trợ trình duyệt. Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn bộ chọn. ....
CSS Cú pháp. :con cuối cùng {.

Làm cách nào để chọn đứa con đầu tiên và cuối cùng trong CSS?

Cách chọn một phần tử là con đầu tiên hoặc cuối cùng của cha mẹ.Lớp giả: Lớp giả đầu tiên có nghĩa là "nếu phần tử này là con đầu lòng của cha mẹ".: con cái cuối cùng có nghĩa là "nếu yếu tố này là con cuối cùng của cha mẹ".Lưu ý rằng chỉ tính các nút phần tử (thẻ HTML), các lớp giả này bỏ qua các nút văn bản.The :first-child pseudo class means "if this element is the first child of its parent". :last-child means "if this element is the last child of its parent". Note that only element nodes (HTML tags) count, these pseudo-classes ignore text nodes.

Đứa con cuối cùng của CSS là gì?

Bộ chọn: NTH-Last-Child cho phép bạn chọn một hoặc nhiều phần tử dựa trên thứ tự nguồn của chúng, theo một công thức.Nó được định nghĩa trong các bộ chọn CSS Cấp độ 3 là một lớp giả cấu trúc của lớp, có nghĩa là nó được sử dụng để tạo kiểu nội dung dựa trên mối quan hệ của nó với các yếu tố cha mẹ và anh chị em.allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.

Làm thế nào để bạn ngoại trừ đứa trẻ cuối cùng trong CSS?

: Không (: Last-child) Bộ chọn: không () loại trừ phần tử được truyền cho nó khỏi lựa chọn.: Bộ chọn con cuối cùng chọn đứa trẻ cuối cùng. The :not() selector excludes the element passed to it from selection. The :last-child selector selects the last child.