Hướng dẫn how do i select a child in css? - làm cách nào để chọn một đứa trẻ trong css?

Cú pháp

selector1 > selector2 { style properties }

Ví dụ

CSS

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

HTML

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.span>
  span>
div>
<span>Span #3, not in the div at all.span>

Kết quả

Xem thêm

Thử nó

Lưu ý rằng, trong cú pháp element:nth-child(), số lượng trẻ em bao gồm trẻ em thuộc bất kỳ loại yếu tố nào; nhưng nó chỉ được coi là một trận đấu nếu phần tử ở vị trí con đó thuộc loại phần tử được chỉ định.

Cú pháp

:nth-child() lấy một đối số duy nhất mô tả một mẫu để phù hợp với các chỉ số phần tử trong danh sách anh chị em. Chỉ số phần tử là dựa trên 1.

:nth-child(  [ of  ]? )

Giá trị từ khóa

selector1 > selector2 { style properties }

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

selector1 > selector2 { style properties }

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

Ký hiệu chức năng

selector1 > selector2 { style properties }

Đại diện cho các yếu tố trong một danh sách có các chỉ số phù hợp với các chỉ số được tìm thấy trong một mẫu số tùy chỉnh, được xác định bởi

selector1 > selector2 { style properties }

• selector1 > selector2 { style properties }
  

  5 là kích thước bước số nguyên,

• selector1 > selector2 { style properties }
  

  6 là một phần bù số nguyên,

• selector1 > selector2 { style properties }
  

  7 là tất cả các số nguyên không âm, bắt đầu từ 0.

Nó có thể được đọc dưới dạng phần tử 14 của danh sách.

Ví dụ

Ví dụ bộ chọn

selector1 > selector2 { style properties }

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

Đại diện cho các hàng lẻ của bảng HTML: 1, 3, 5, v.v.

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

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

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

Đại diện cho yếu tố thứ bảy.

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

Biểu thị các phần tử 5 [= 5 × 1], 10 [= 5 × 2], 15 [= 5 × 3], v.v. Không kết hợp, vì các yếu tố được lập chỉ mục từ 1, trong khi

selector1 > selector2 { style properties }

selector1 > selector2 { style properties }

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

selector1 > selector2 { style properties }

selector1 > selector2 { style properties }

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

Đại diện cho thứ bảy và tất cả các yếu tố sau: 7 [= 0+7], 8 [= 1+7], 9 [= 2+7], v.v.7 [=0+7], 8 [=1+7], 9 [=2+7], etc.

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

Biểu thị các phần tử 4 [= (3 × 0) +4], 7 [= (3 × 1) +4], 10 [= (3 × 2) +4], 13 [= (3 × 3) +4], vân vân.4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc.

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.span>
  span>
div>
<span>Span #3, not in the div at all.span>

Đại diện cho ba yếu tố đầu tiên. [= -0+3, -1+3, -2+3]

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.span>
  span>
div>
<span>Span #3, not in the div at all.span>

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

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.span>
  span>
div>
<span>Span #3, not in the div at all.span>

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.span>
  span>
div>
<span>Span #3, not in the div at all.span>

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.span>
  span>
div>
<span>Span #3, not in the div at all.span>

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.span>
  span>
div>
<span>Span #3, not in the div at all.span>

Đại diện cho mỗi

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.span>
  span>
div>
<span>Span #3, not in the div at all.span>

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.span>
  span>
div>
<span>Span #3, not in the div at all.span>

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.span>
  span>
div>
<span>Span #3, not in the div at all.span>

Đại diện cho phần thứ tám đến thứ mười lăm

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.span>
  span>
div>
<span>Span #3, not in the div at all.span>

Ví dụ chi tiết

HTML

<h3>
  <code>span:nth-child(2n+1)code>, WITHOUT an <code><em>code> among
  the child elements.
h3>
<p>Children 1, 3, 5, and 7 are selected.p>
<div class="first">
  <span>Span 1!span>
  <span>Span 2span>
  <span>Span 3!span>
  <span>Span 4span>
  <span>Span 5!span>
  <span>Span 6span>
  <span>Span 7!span>
div>

<br />

<h3>
  <code>span:nth-child(2n+1)code>, WITH an <code><em>code> among the
  child elements.
h3>
<p>
  Children 1, 5, and 7 are selected.<br />
  3 is used in the counting because it is a child, but it isn't selected because
  it isn't a <code><span>code>.
p>
<div class="second">
  <span>Span!span>
  <span>Spanspan>
  <em>This is an `em`.em>
  <span>Spanspan>
  <span>Span!span>
  <span>Spanspan>
  <span>Span!span>
  <span>Spanspan>
div>

<br />

<h3>
  <code>span:nth-of-type(2n+1)code>, WITH an <code><em>code> among the
  child elements.
h3>
<p>
  Children 1, 4, 6, and 8 are selected.<br />
  3 isn't used in the counting or selected because it is an
  <code><em>code>, not a <code><span>code>, and
  <code>nth-of-typecode> only selects children of that type. The
  <code><em>code> is completely skipped over and ignored.
p>
<div class="third">
  <span>Span!span>
  <span>Spanspan>
  <em>This is an `em`.em>
  <span>Span!span>
  <span>Spanspan>
  <span>Span!span>
  <span>Spanspan>
  <span>Span!span>
div>

CSS

html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n + 1),
.second span:nth-child(2n + 1),
.third span:nth-of-type(2n + 1) {
  background-color: lime;
}

Kết quả

Xem thêm