Hướng dẫn how do i use css only for second child? - làm cách nào để tôi chỉ sử dụng css cho đứa con thứ hai?

Thử nó

Lưu ý rằng, trong cú pháp

.container li:first-child + li a
.container li:nth-child(2) a

Cú pháp

.container li:first-child + li a
.container li:nth-child(2) a

:nth-child(  [ of  ]? )

Giá trị từ khóa

.container li:first-child + li a
.container li:nth-child(2) a

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

.container li:first-child + li a
.container li:nth-child(2) a

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

.container li:first-child + li a
.container li:nth-child(2) a

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

.container li:first-child + li a
.container li:nth-child(2) a

• 
      
  ...
      
  ...
      
  ...
  
  

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

• 
      
  ...
      
  ...
      
  ...
  
  

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

• 
      
  ...
      
  ...
      
  ...
  
  

  2 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ử 39 của một danh sách.

Ví dụ

Ví dụ bộ chọn

    
...
    
...
    
...

    
...
    
...
    
...

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

    
...
    
...
    
...

    
...
    
...
    
...

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

    
...
    
...
    
...

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

    
...
    
...
    
...

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

    
...
    
...
    
...

    
...
    
...
    
...

.container li:first-child + li a { ... } 

    
...
    
...
    
...

    
...
    
...
    
...

.container li:first-child + li a { ... } 

.container li:first-child + li a { ... } 

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

.container li:first-child + li a { ... } 

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.

.container li:first-child + li a { ... } 

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

.container li:first-child + li a { ... } 

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

.container li:first-child + li a { ... } 

.container li:first-child + li a { ... } 

.container li:first-child + li a { ... } 

.container li a:nth-of-type(2) {
    /* ... */
}

Đại diện cho mỗi

.container li:first-child + li a { ... } 

.container li a:nth-of-type(2)

.container li a:nth-of-type(2) {
    /* ... */
}

Đại diện cho phần thứ tám đến các yếu tố

.container li:first-child + li a { ... } 

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

.container li a:nth-of-type(2)

Kết quả

Xem thêm