CSS đầu tiên và: con cuối cùng

Bộ chọn

  
One
  
Two
  
Three
  
Four
  
Five

9 cho phép bạn chọn một hoặc nhiều phần tử dựa trên thứ tự nguồn của chúng, theo một công thức

/* Select the first list item */
li:nth-child(1) { }

/* Select the 5th list item */
li:nth-child(5) { }

/* Select every other list item starting with first */
li:nth-child(odd) { }

/* Select every 3rd list item starting with first */
li:nth-child(3n - 2) { }

/* Select every 3rd list item starting with 2nd */
li:nth-child(3n - 1) { }

/* Select every 3rd child item, as long as it has class "el" */
.el:nth-child(3n) { }

Nó được định nghĩa trong thông số kỹ thuật Cấp 3 của Bộ chọn CSS là "lớp giả cấu trúc", nghĩa là nó được sử dụng để tạo kiểu cho nội dung dựa trên mối quan hệ của nó với các phần tử cha và phần tử anh chị em

Giả sử chúng ta đang xây dựng lưới CSS và muốn xóa lề trên mọi mô-đun lưới thứ tư. Đây là HTML đó

  
One
  
Two
  
Three
  
Four
  
Five

Thay vì thêm một lớp vào mỗi mục thứ tư (e. g.

.module:nth-child(4n) {
  margin-right: 0;
}

0), chúng ta có thể sử dụng

  
One
  
Two
  
Three
  
Four
  
Five

9

.module:nth-child(4n) {
  margin-right: 0;
}

Bộ chọn

  
One
  
Two
  
Three
  
Four
  
Five

9 nhận một đối số. đây có thể là một số nguyên, từ khóa

.module:nth-child(4n) {
  margin-right: 0;
}

3,

  
One
  
Two
  
Three
  
Four
  
Five

0 hoặc một công thức. Nếu một số nguyên được chỉ định thì chỉ một phần tử được chọn—nhưng các từ khóa hoặc công thức sẽ lặp qua tất cả các phần tử con của phần tử cha và chọn các phần tử phù hợp — tương tự như điều hướng các mục trong một mảng JavaScript. Từ khóa “chẵn” và “lẻ” rất đơn giản (2, 4, 6, v.v. hoặc 1, 3, 5 tương ứng). Công thức được xây dựng bằng cú pháp

  
One
  
Two
  
Three
  
Four
  
Five

1, trong đó

• “a” là một giá trị số nguyên
• "n" là chữ cái "n"
• “+” là một toán tử và có thể là “+” hoặc “-”
• “b” là một số nguyên và bắt buộc phải có nếu một toán tử được đưa vào công thức

Điều quan trọng cần lưu ý là công thức này là một phương trình và lặp lại qua từng phần tử anh chị em, xác định phần tử nào sẽ được chọn. Phần “n” của công thức, nếu được bao gồm, biểu thị một tập hợp các số nguyên dương tăng dần (giống như lặp qua một mảng). Trong ví dụ trên của chúng tôi, chúng tôi đã chọn mọi phần tử thứ tư với công thức

  
One
  
Two
  
Three
  
Four
  
Five

2, công thức này hoạt động vì mỗi khi một phần tử được chọn, “n” tăng thêm một (4×0, 4×1, 4×2, 4×3, v.v.). Nếu thứ tự của một phần tử khớp với kết quả của phương trình, nó sẽ được chọn (4, 8, 12, v.v.). Để được giải thích sâu hơn về toán học liên quan, vui lòng đọc bài viết này

Để minh họa thêm, đây là một số ví dụ về bộ chọn

  
One
  
Two
  
Three
  
Four
  
Five

9 hợp lệ

Dự phòng nhúng CodePen

May mắn thay, không phải lúc nào bạn cũng phải tự mình tính toán—có một số ________ 19 người kiểm tra và máy phát điện ngoài kia

• Người thử nghiệm của Lea Verou

:nth-child(an + b of )

Có một bộ lọc ít được biết đến có thể được thêm vào

  
One
  
Two
  
Three
  
Four
  
Five

9 theo thông số kỹ thuật. Khả năng chọn

  
One
  
Two
  
Three
  
Four
  
Five

9 của một tập hợp con các phần tử, sử dụng định dạng

  
One
  
Two
  
Three
  
Four
  
Five

7. Giả sử bạn có một danh sách nội dung hỗn hợp. Một số có lớp

  
One
  
Two
  
Three
  
Four
  
Five

8, một số có lớp

  
One
  
Two
  
Three
  
Four
  
Five

9 và bạn muốn chọn 3 ảnh đầu tiên. Bạn có thể làm như vậy với bộ lọc “của” như vậy

:nth-child(-n+3 of .picture) {
  /* 
     Selects the first 3 elements
     applied not to ALL children but 
     only to those matching .picture 
  */
}

Lưu ý rằng điều này khác với việc thêm bộ chọn trực tiếp vào bộ chọn

  
One
  
Two
  
Three
  
Four
  
Five

9

  
One
  
Two
  
Three
  
Four
  
Five

0

Điều này có thể hơi khó hiểu, vì vậy một ví dụ có thể giúp minh họa sự khác biệt

Dự phòng nhúng CodePen

Trình duyệt hỗ trợ bộ lọc “của” rất hạn chế. Khi viết bài này, chỉ có Safari hỗ trợ cú pháp. Để kiểm tra trạng thái của trình duyệt yêu thích của bạn, đây là các sự cố mở liên quan đến

.module:nth-child(4n) {
  margin-right: 0;
}

1

• firefox. Hỗ trợ cho con thứ n(An+B của sel)
• Trình duyệt Chrome. Thực hiện. con thứ n(an+b của S)

Điểm quan tâm

• 
    
  One
    
  Two
    
  Three
    
  Four
    
  Five
  

  9 lặp qua các phần tử bắt đầu từ đầu thứ tự nguồn. Sự khác biệt duy nhất giữa nó và

  .module:nth-child(4n) {
    margin-right: 0;
  }

  3 là cái sau lặp qua các phần tử bắt đầu từ dưới cùng của thứ tự nguồn
• Cú pháp để chọn số phần tử

  .module:nth-child(4n) {
    margin-right: 0;
  }

  4 đầu tiên hơi phản trực giác. Bạn bắt đầu với

  .module:nth-child(4n) {
    margin-right: 0;
  }

  5, cộng với số phần tử dương mà bạn muốn chọn. Ví dụ:

  .module:nth-child(4n) {
    margin-right: 0;
  }

  6 sẽ chọn 3 phần tử

  .module:nth-child(4n) {
    margin-right: 0;
  }

  7 đầu tiên
• Bộ chọn

  
    
  One
    
  Two
    
  Three
    
  Four
    
  Five
  

  9 rất giống với

  .module:nth-child(4n) {
    margin-right: 0;
  }

  9 nhưng có một điểm khác biệt quan trọng. nó ít cụ thể hơn. Trong ví dụ của chúng tôi ở trên, chúng sẽ tạo ra kết quả tương tự vì chúng tôi chỉ lặp lại trên 90 phần tử, nhưng nếu chúng tôi đang lặp lại trên một nhóm anh chị em phức tạp hơn, thì

  
    
  One
    
  Two
    
  Three
    
  Four
    
  Five
  

  9 sẽ cố gắng khớp tất cả các anh chị em, không chỉ các anh chị em cùng loại phần tử. Điều này cho thấy sức mạnh của

  
    
  One
    
  Two
    
  Three
    
  Four
    
  Five
  

  9—nó có thể chọn bất kỳ phần tử anh chị em nào trong một sắp xếp, không chỉ các phần tử được chỉ định trước dấu hai chấm

Thuộc tính liên quan

• nth-con-cuoi
• loại thứ n
• nth-cuối cùng của loại
• hạng nhất
• cuối cùng của loại

Các nguồn lực khác

• Có ích. công thức con thứ n
• Tài liệu Mozilla
• QuirksMode bài viết
• bài viết sitepoint

Hỗ trợ trình duyệt

ChromeSafariFirefoxOperaIEAndroidiOSAny3. 2+Bất kỳ9. 5+9+Bất kỳBất kỳ

  
One
  
Two
  
Three
  
Four
  
Five

9 đã được giới thiệu trong Bộ chọn CSS Mô-đun 3, có nghĩa là các phiên bản trình duyệt cũ không hỗ trợ. Tuy nhiên, hỗ trợ trình duyệt hiện đại là hoàn hảo và bộ chọn giả mới được sử dụng rộng rãi trong môi trường sản xuất. Nếu bạn yêu cầu hỗ trợ trình duyệt cũ hơn, hãy điền đầy đủ cho IE hoặc sử dụng các bộ chọn này theo những cách không quan trọng, đó là cải tiến liên tục, được khuyến nghị

Làm cách nào để tạo kiểu con cuối cùng trong CSS?

Con đầu tiên trong CSS là gì?

Con cuối cùng hoạt động như thế nào trong CSS?

Làm cách nào để chỉ áp dụng CSS cho đứa con đầu lòng?