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?

Tôi đang cố gắng sử dụng cái này để chọn thẻ thứ hai từ danh sách:

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

Nhưng nó dường như không hoạt động. Có cách khác, lý tưởng là CSS thuần túy [trừ

.container li a:nth-of-type[2]

1] hoặc bất cứ ai có thể thấy nơi tôi đã sai?

...

Trong trường hợp đó, bạn phải viết lại phong cách thành:

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

Đã trả lời ngày 3 tháng 3 năm 2012 lúc 22:31Mar 3, 2012 at 22:31

...

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


    ...
    ...
    ...

4 hoặc


    ...
    ...
    ...

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


    ...
    ...
    ...

6 hoặc


    ...
    ...
    ...

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


    ...
    ...
    ...

2 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


    ...
    ...
    ...

1 của công thức là

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

2, 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


    ...
    ...
    ...

2 starts from 0. This may seem weird at first, but it makes more sense when the


    ...
    ...
    ...

1 part of the formula is

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

2, like in the next example.

.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 { ... }

7 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

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

8 đơn giản [mặc dù có độ đặc hiệu cao hơn].

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

9 hoặc

.container li a:nth-of-type[2] {
    /* ... */
}

Đại diện cho mỗi

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

7 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

.container li a:nth-of-type[2]

4 [và có cùng độ đặc hiệu].

.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 { ... }

7 thứ mười lăm của một nhóm anh chị em.

Ví dụ chi tiết

HTML


  span:nth-child[2n+1], WITHOUT an <em> among
  the child elements.

Children 1, 3, 5, and 7 are selected.

  Span 1!
  Span 2
  Span 3!
  Span 4
  Span 5!
  Span 6
  Span 7!





  span:nth-child[2n+1], WITH an <em> among the
  child elements.


  Children 1, 5, and 7 are selected.
  3 is used in the counting because it is a child, but it isn't selected because
  it isn't a <span>.


  Span!
  Span
  This is an `em`.
  Span
  Span!
  Span
  Span!
  Span





  span:nth-of-type[2n+1], WITH an <em> among the
  child elements.


  Children 1, 4, 6, and 8 are selected.
  3 isn't used in the counting or selected because it is an
  <em>, not a <span>, and
  nth-of-type only selects children of that type. The
  <em> is completely skipped over and ignored.


  Span!
  Span
  This is an `em`.
  Span!
  Span
  Span!
  Span
  Span!

CSS

.container li a:nth-of-type[2]

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 web

Bảng BCD chỉ tải trong trình duyệt

Ví dụ

Ví dụ bộ chọn

Ví dụ chi tiết

HTML

CSS

Kết quả

Thông số kỹ thuật

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

Xem thêm

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề