1.:first-child 整个结构中的第一个 :last-child 整个结构中的最后一个
2.:first-of-type :last-of-type 这个元素类型的第一个和最后一个
3.:nth-child(n) 整个结构中的第n个 n可以写成2n或even,指的是偶数 2n-1或2n+1或odd是奇数 :nth-of-type(n) 这个类型的第几个 4.:nth-last-child(n):整个结构中倒数第几个 :nth-last-of-type(n) 这个类型的倒数第n个
5.:only-child 整个结构只有一个标签,其他标签都不存在 :only-of-child 整个结构中这个类型的只有一个
6.:empty 当元素内容为空时的设置 7.:root选择文档的根节点
:root和html的区别: :root的优先级高于html,html是指html文档的根节点,但是root不一定指html,也可能是其他文档结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> h1:first-child{color:#ff0;} h1:last-child{color:#ff0;} div:first-of-type{color:#f00;} div:last-of-type{color:#f00;} div:nth-child(3){color:#0ff;} div:nth-of-type(3){color:#00f;} h1:nth-last-child(2){color:#999;} div:nth-last-of-type(2){color:#f0f;} </style> </head> <body> <h1>1</h1> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> <div>div5</div> <div>div6</div> <div>div7</div> <div>div8</div> <div>div9</div> <div>div10</div> <h1>2</h1> <h1>3</h1> </body> </html>