Blog
Android
iOS
WP OS
- Lúc: 23:03
Trong ngôn ngữ CSS có đếm thứ tự cho chúng để sử dụng cho các thứ tự HTML
Ví dụ đoạn HTML như sau
<div id='menu'>
<ul>
<li> <a href='#'> Nội dung của li 1 </a> </li>
<li> <a href='#'> Nội dung của li 2 </a> </li>
<li> <a href='#'> Nội dung của li 3 </a> </li>
<li> <a href='#'> Nội dung của li 4 </a> </li>
<li> <a href='#'> Nội dung của li 5 </a> </li>
<li> <a href='#'> Nội dung của li 7 </a> </li>
<li> <a href='#'> Nội dung của li 8 </a> </li>
<li> <a href='#'> Nội dung của li 9 </a> </li>
<li> <a href='#'> Nội dung của li 10 </a> </li>
</ul>
</div>
Ví dụ cho các trường hợp
:nth-last-child(xn + hoặc - y) và :first-child và :last-child các cách ứng dụng
Ví dụ 1: Ta viết CSS như sau
#menu ul li{color:red}Ngay lặp tức nội dung trong thẻ <li> </li> nhận giá trị màu chữ là red (màu đỏ) cả 10 thằng.
Kết quả 1
Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10
Ví dụ 2: Ta viết Css :nth-last-child(3)
#menu ul li a:nth-last-child(3){color:red}
Kết quả 2:
Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10
Ví dụ 3: Ta viết Css :first-child (giá trị đầu tiên)
#menu ul li:first-child{color:red}
Kết quả 3:
Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10
Ví dụ 3: Ta viết Css :first-child và :nth-last-child(1)
#menu ul li:first-child{color:red} = Chữ màu đỏ
#menu ul li:nth-last-child(1){color:blue} = Chữ màu xanh
Kết quả 3:
Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10
Có nghĩa rằng #menu ul li:first-child{color:red} và #menu ul li a:nth-last-child(1){color:blue}đều gán CSS cho thằng thẻ <li> đầu tiên nhưng :first-child sẽ có giá trị mạnh hơn :nth-last-child(1) nên sẽ cho ra màu đỏ
Ví dụ 4: Ta viết Css :nth-last-child(10) và :last-child
#menu ul li:last-child{color:red} = Chữ màu đỏ
#menu ul li:nth-last-child(10){color:blue} = Chữ màu xanh
Kết quả 4:
Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10
Ví dụ 5: Ta viết Css :nth-last-child(2n+1)
#menu ul li:nth-last-child(2n+1){color:red}
- Với n có giá trị không âm khi đó ta thay n {0,1,2,3,4,5,6..... [+vô cùng] }
- Tương ứng :nth-last-child(1), :nth-last-child(3), :nth-last-child(5)
=> Lúc này sẽ ra toàn con số lẻ :nth-last-child{1,3,5,7,9.......2n+1} = :nth-last-child(odd)
Với odd (số lẻ)
Kết quả 5:
Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10
Tương tự:
Ví dụ 6: Ta viết Css :nth-last-child(2n)
#menu ul li:nth-last-child(even){color:red} or #menu ul li:nth-last-child(2n){color:red}
Lấy thứ tự chẳn {2,4,6,8,10.......2n}
Kết quả 6:
Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10
Ví dụ 7: Ta viết Css :nth-last-child(3n+1)
#menu ul li:nth-last-child(3n+1){color:red}
Sẽ ra thứ tự {1,4,7........3n+1}
Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10
Ví dụ 8: Ta viết Css :nth-last-child(n+5)
#menu ul li:nth-last-child(n+5){color:red}
Kết quả 8:
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10
Rút lại ta có công thức
:nth-last-child(xn ± y)
Với x,y là con số không âm (Chạy từ 0,1,2,3.....+vô cùng)
Chúc bạn có thêm kiến thức quý báu! · ngày 18/03/2018
0 nhận xét