css中的nth-child示例用法代码
代码语言:html
所属分类:布局界面
代码描述:css中的nth-child示例用法代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { height: 100%; margin: 0; background: darkslategray; } .container { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; margin: auto; color: white; } .container h1 { grid-column: 1 / -1; text-align: center; background-color: #111; color: white; font-size: 3rem; padding-block: 0.5rem; margin: 0; } .container h1 span { color: yellow; } .block { display: flex; flex-direction: column; } .circles { display: flex; justify-content: center; gap: 0.5rem; padding-block: 0.5rem; } .caption { flex: 100%; text-align: center; } .circle { width: 2rem; height: 2rem; border-radius: 50%; background-color: silver; } .block:nth-of-type(1) .circles :last-child { background: salmon; } .block:nth-of-type(2) .circles :nth-last-child(2) { background: salmon; } .block:nth-of-type(3) .circles :nth-child(2) { background: salmon; } .block:nth-of-type(4) .circles :nth-child(3n) { background: salmon; } .block:nth-of-type(5) .circles :nth-child(even) { background: salmon; } .block:nth-of-type(6) .circles :nth-child(odd) { background: salmon; } .block:nth-of-type(7) .circles :nth-child(n+3) { background-color: salmon; } .block:nth-of-type(8) .circles :nth-child(-n+3) { background-color: salmon; } .block:nth-of-type(9) .circles :nth-child(3n+1) { background-color: salmon; } .block:nth-of-type(10) .circles :nth-child(3n-1) { background-color: salmon; } </style> </head> <body> <div class="container"> <h1>CSS <span>:nth-child</span> Selectors</h1> <div class="block"> <div class="circles"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> <code class="caption">:last-child</code> </div> <div class="block"> <div class="circles"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> <code class="caption">:nth-last-child(2)</code> </div> <div class="block"> <div class="circles"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> <code class="caption">:nth-child(2)</code> </div> <div class="block"> <div class="circles"> <div class="circle"></div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0