結構偽類選擇器
阿新 • • 發佈：2022-04-14
結構偽類選擇器
什麼是結構偽類選擇器？
什麼是偽類選擇器？
CSS中已經定義好的選擇器,不能隨便取名
什麼是結構偽類選擇器？
針對HTML層級結構的的偽類選擇器
應用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*選擇p的父類的第二個元素且該元素型別為p*/ p:nth-child(2) { background: #4949b3; } /*選擇p的父類的型別為p的元素的第二個元素*/ p:nth-of-type(2) { background: #ac49b3; } /*ul的最後一個元素*/ ul li:last-child { background: red; } /*ul的第一個元素*/ ul li:first-child { background: #0022ff; } /*滑鼠移動到上面會變黃色*/ a:hover { background: yellow; } </style> </head> <body> <a href="">1231</a> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p> <p>p4</p> <ul> <li>li</li> <li>li</li> <li>li</li> </ul> </body> </html>