|
结构性伪类选择器（2） <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> /*结构选择器：获去当前元素的第一个子元素*/ p:first-child { background-color: red; } /*结构选择器：获去当前元素的最后一个子元素*/ p:last-child { background-color: yellow; } /*结构选择器：选择某个元素的一个或者多个特定的子元素*/ p:nth-child(3) { background-color: gray; } /*结构选择器：选择某个元素的一个或者多个特定的子元素;从这个元素的最后一个子元素开始获取*/ p:nth-last-child(2) { background-color: pink; } /*结构选择器：选择特定的元素*/ p:nth-of-type(2) { color: pink; } /*结构选择器：选择特定的元素;从这个元素的最后一个元素开始获取*/ p:nth-last-of-type(2) { background-color: pink; } /*结构选择器：选择一个上级元素下的第一个同类子元素*/ p:first-of-type { color:gray; } /*结构选择器：选择一个上级元素下的最后一个同类子元素*/ p:last-of-type { color:gray; } /*结构选择器：选择的元素是他父元素的唯一一个元素*/ p nly-child { color:gray; } /*结构选择器：选择的元素是他上级元素的唯一一个相同类型的子元素*/ pnly-of-type { background-color:blue; } </style> </head> <body> <p>第1个</p> <p>第2个</p> <p>第3个</p> <p>第4个</p> <div><p>第5个</p></div> <div><p>第6个</p><p>北京</p></div> </body> 循环使用样式： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>循环使用样式</title> <style> p:nth-child(3n+1) {background-color: yellow;} p:nth-child(3n+2) {background-color: limegreen;} p:nth-child(3n) {background-color: wheat;} </style> </head> <body> <p>第1个</p> <p>第2个</p> <p>第3个</p> <p>第4个</p> <p>第5个</p> <p>第6个</p> <p>第7个</p> <p>第8个</p> <p>第9个</p> <p>第10个</p> <p>第11个</p> <p>第12个</p> </body>
| 
发表于 2021-12-2 09:37:17
收藏
