Các phần tử lồng nhau trong css

try it

cú pháp

Phân loại giả

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

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

Keyword value

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

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

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

Đạ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. , count from the end

signal function

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

Đạ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

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

Ví dụ

Ví dụ chọn lọc

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

Đại diện cho các hàng đơn lẻ của một bảng HTML. 1, 3, 5, v. v. , count from the end

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

Đại diện cho các hàng hiện tại của một bảng HTML. 2, 4, 6, v. v. , count from the end

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

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

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

Đại diện cho các yếu tố 5, 10, 15, v. v. , count from the end

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

Đại diện cho các yếu tố 4, 7, 10, 13, v. v. , count from the end

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

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

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

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

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

Dai dien cho each

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

Ví dụ bảng

HTML

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

CSS

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  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 số lượ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ả giả và tổ hợp anh chị em chung

HTML

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

CSS

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

Kết quả

Xem thêm