7.結構偽類選擇器
阿新 • • 發佈：2022-03-02
7.結構偽類選擇器
程式碼部分:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--避免使用:class id選擇器--> <style> /*ul的第一個子元素*/ ul li:first-child { background: green; } /*ul的最後一個子元素*/ ul li:last-child { background: greenyellow; } /*選中p1: 定位到父元素, 選擇當前的第一個元素 選中當前p元素的父級元素的第一個子元素, 並且是當前元素才生效! 按順序 */ p:nth-child(2) { background: hotpink; } /*選中父元素下的p元素的第二個, 按型別*/ p:nth-of-type(2) { background: indigo; } a:hover { background: lightseagreen; } </style> </head> <body> <a href="">11111</a> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> </body> </html>