Bộ kết hợp trẻ em (> ) được đặt giữa hai bộ chọn CSS. Nó chỉ phù hợp với các yếu tố phù hợp với bộ chọn thứ hai là trẻ em trực tiếp của các yếu tố phù hợp với thứ nhất.child combinator (> ) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. /* List items that are children of the "my-things" list */
ul.my-things > li {
margin: 2em;
}
Các yếu tố phù hợp với bộ chọn thứ hai phải là trẻ em ngay lập tức của các yếu tố phù hợp với bộ chọn đầu tiên. Điều này chặt chẽ hơn so với bộ kết hợp hậu duệ, phù hợp với tất cả các yếu tố phù hợp với bộ chọn thứ hai tồn tại một phần tử tổ tiên phù hợp với bộ chọn đầu tiên, bất kể số lượng "hoa bia" lên DOM. Cú phápselector1 > selector2 { style properties }
CSSspan {
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>
Thông số kỹ thuật
Sự chỉ rõ |
---|
Người chọn cấp độ 4 # Trẻ em # child-combinators
|
Tính tương thích của trình duyệt webBảng BCD chỉ tải trong trình duyệt
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.:nth-child() CSS pseudo-class matches elements based on their position among a group of siblings. 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( <nth> [ of <complex-selector-list> ]? )
Giá trị từ khóaselector1 > selector2 { style properties }
1Đạ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 }
2Đạ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ăngselector1 > selector2 { style properties }
3Đạ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 }
4, trong đó: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ụ bộ chọnselector1 > selector2 { style properties }
9 hoặc span {
background-color: aqua;
}
div > span {
background-color: yellow;
}
0Đạ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;
}
1 hoặc span {
background-color: aqua;
}
div > span {
background-color: yellow;
}
2Đạ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;
}
3Đại diện cho yếu tố thứ bảy. span {
background-color: aqua;
}
div > span {
background-color: yellow;
}
4Biể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 }
7 bắt đầu từ 0. Điều này có vẻ kỳ lạ lúc đầu, nhưng nó có ý nghĩa hơn khi phần selector1 > selector2 { style properties }
6 của công thức là span {
background-color: aqua;
}
div > span {
background-color: yellow;
}
7, như trong ví dụ tiếp theo.5 [=5×1], 10 [=5×2], 15 [=5×3], etc. The first one to be returned as a result of the formula is 0 [=5x0], resulting in a no-match, since the elements are indexed from 1, whereas selector1 > selector2 { style properties }
7 starts from 0. This may seem weird at first, but it makes more sense when the selector1 > selector2 { style properties }
6 part of the formula is span {
background-color: aqua;
}
div > span {
background-color: yellow;
}
7, like in the next example.span {
background-color: aqua;
}
div > span {
background-color: yellow;
}
8Đạ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;
}
9Biể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>
0Đạ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>
1Đạ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>
2 trong một nhóm anh chị em. Điều này chọn các yếu tố tương tự như một bộ chọn <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>
3 đơn giản (mặc dù có độ đặc hiệu cao hơn).<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>
4 hoặc <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>
5Đạ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>
2 là yếu tố đầu tiên trong một nhóm anh chị em. Điều này giống như bộ chọn <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>
7 (và có cùng độ đặc hiệu).<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>
8Đạ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>
2 của một nhóm anh chị em.Ví dụ chi tiếtHTML<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 2</span>
<span>Span 3!</span>
<span>Span 4</span>
<span>Span 5!</span>
<span>Span 6</span>
<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>Span</span>
<em>This is an `em`.</em>
<span>Span</span>
<span>Span!</span>
<span>Span</span>
<span>Span!</span>
<span>Span</span>
</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-type</code> only selects children of that type. The
<code><em></code> is completely skipped over and ignored.
</p>
<div class="third">
<span>Span!</span>
<span>Span</span>
<em>This is an `em`.</em>
<span>Span!</span>
<span>Span</span>
<span>Span!</span>
<span>Span</span>
<span>Span!</span>
</div>
CSShtml {
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ảThông số kỹ thuật
Sự chỉ rõ |
---|
Người chọn cấp độ 4 # nth-con-pseudo # nth-child-pseudo
|
Tính tương thích của trình duyệt webBảng BCD chỉ tải trong trình duyệt
Làm cách nào để chọn đứa con tiếp theo của tôi trong CSS?
Bộ kết hợp anh chị em liền kề ( +) phân tách hai bộ chọn và chỉ khớp với phần tử thứ hai chỉ khi nó ngay lập tức theo phần tử thứ nhất và cả hai đều là con của cùng một phần tử cha. separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element .
Làm thế nào để tôi đề cập đến đứa trẻ thứ hai trong CSS?
Bất kể,: nth-of-type là cách đúng đắn để làm điều đó.Nếu bạn có một mỗi, thì bạn có thể muốn nói.container li: nth-of-type (2) a.
Làm thế nào để bạn nhắm mục tiêu mọi đứa trẻ trong CSS?
Chọn tất cả các yếu tố trẻ em.Phần tử> Phần tử .. Nếu các phần tử con chọn đệ quy thì hãy sử dụng cú pháp sau.Div.Class> * {// Thuộc tính CSS}.
Làm thế nào để bạn nhắm mục tiêu phần tử tiếp theo trong CSS?
Bộ chọn phần tử+được sử dụng để chọn một phần tử trực tiếp sau một phần tử cụ thể khác. is used to select an element that is directly after another specific element. |