programming css

Không phải 2 css con cuối cùng

Hướng dẫn CSS này giải thích cách sử dụng bộ chọn CSS được gọi là. nth-last-child với cú pháp và ví dụ

Sự miêu tả

CSS. bộ chọn con cuối cùng thứ n cho phép bạn nhắm mục tiêu một phần tử là phần tử con cuối cùng thứ n trong phần tử cha của nó

cú pháp

Cú pháp cho. bộ chọn CSS đang hoạt động là

element:nth-last-child[value] { style_properties }

Tham số hoặc Đối số

phần tử Phần tử cuối cùng thứ n của loại phần tử đó trong phần tử cha của nó. giá trị

Xác định trẻ em nào sẽ nhắm mục tiêu. Nó có thể là một trong những điều sau đây

ValueDescriptionevenNhắm mục tiêu các phần tử con chẵn, bắt đầu từ phần tử con cuối cùng và ngược lại
tr. nth-last-con[thậm chí] { nền. màu xanh da trời; . Tương tự như khi sử dụng từ khóa chẵn
Công thức sẽ tính là 2x0, 2x1, 2x2, 2x3,. dẫn đến tất cả trẻ em chẵn đều được nhắm mục tiêu [làm việc ngược].
tr. nth-last-con[2n] { nền. màu xanh da trời; . nth-last-con[lẻ] { nền. màu xanh da trời; . Tương tự như khi sử dụng từ khóa lẻ
tr:nth-last-child[odd] { background: blue; }2n+1Also targets the odd children. Same as using the odd keyword
Công thức sẽ tính như [2x0]+1, [2x1]+1, [2x2]+1, [2x3]+1,. dẫn đến tất cả trẻ em lẻ đều được nhắm mục tiêu [làm việc ngược].
tr. nth-last-con[2n+1] { nền. màu xanh da trời; .
1 là con cuối cùng, 2 là con cuối cùng thứ hai, 3 là con cuối cùng thứ ba, v.v.
tr. nth-last-con[1] { nền. màu xanh da trời; . nth-last-con[2] { nền. màu xanh da trời; . nth-last-con[3] { nền. màu xanh da trời; . [làm ngược lại]
tr:nth-last-child[2] { background: blue; }
tr:nth-last-child[3] { background: blue; }-an+bTargets children based on the formula -an + b
Formula would calculate as [-ax0]+b, [-ax1]+b, [-ax2]+b, [-ax3]+b, ...[working backwards]
tr. nth-last-con[-n+2] { nền. màu xanh da trời;

style_propertiesCác kiểu CSS để áp dụng cho phần tử con cuối cùng thứ n

Ghi chú

Các. bộ chọn con cuối cùng thứ n là một lớp giả cho phép bạn nhắm mục tiêu một phần tử là phần tử con cuối cùng thứ n trong phần tử cha của nó
Xem thêm. con thứ n,. con đầu lòng,. đứa con cuối cùng, và. bộ chọn con một

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

CSS. bộ chọn con thứ n có hỗ trợ cơ bản với các trình duyệt sau

Trình duyệt Chrome
Firefox [Tắc kè]
Internet Explorer 9+ [IE 9+]
Opera 9. 5+
Safari [WebKit]

Ví dụ

Chúng tôi sẽ thảo luận về. bộ chọn con thứ n bên dưới, khám phá các ví dụ về cách sử dụng bộ chọn này trong CSS để áp dụng kiểu dáng cho phần tử thứ n

Hãy xem một CSS. ví dụ nth-last-child nơi chúng tôi áp dụng. bộ chọn con thứ n có giá trị nguyên

CSS sẽ trông như thế này

tr:nth-last-child[1] { background: cyan; }

HTML sẽ trông như thế này


    Column 1 Heading
    Column 2 Heading
  
  
  
    techonthenet.com
    Technical reference site
  
  
    checkyourmath.com
    Math calculation site
  
  
    bigactivities.com
    Kids activity site

The result would look like this [The :nth-last-child selector would style the tags as follows]:

Check out this Pen!

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ố công cụ kiểm tra và tạo :nth-last-child ngoài kia

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

Điểm quan tâm

:nth-last-child lặp qua các phần tử bắt đầu từ dưới cùng của thứ tự nguồn. Sự khác biệt duy nhất giữa nó và
```
tr:nth-last-child[1] { background: cyan; }
```
0 là cái sau lặp qua các phần tử bắt đầu từ đầu thứ tự nguồn
Bộ chọn :nth-last-child rất giống với
```
li {
  background: slategrey;
}
/* select the second-last item */
li:nth-last-child[2] {
  background: lightslategrey;
}
```
0 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 qua các phần tử
```
li {
  background: slategrey;
}
/* select the second-last item */
li:nth-last-child[2] {
  background: lightslategrey;
}
```
6, nhưng nếu chúng tôi đang lặp qua một nhóm anh chị em phức tạp hơn, thì :nth-last-child 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 :nth-last-child—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

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

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

Tài liệu Mozilla
QuirksMode bài viết
bài viết sitepoint

Hỗ trợ trình duyệt

ChromeSafariFirefoxOperaIEAndroidiOSWorks3.2+Works9.5+9+WorksWorks

:nth-last-child đã đượ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ợ nó. 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ị

techonthenet.com	Technical reference site
checkyourmath.com	Math calculation site
bigactivities.com	Kids activity site