css 选择器 :root、:target 用法
1、element:root
匹配element元素在文档中的根元素, 在HTML中,根元素永远是html
2、selector:target
用户选取当前活动的目标元素。 url后跟锚点,指向的就是目标元素,目标元素就编程css里注明:target的样式的样子,完整代码如下:
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>css :target使用方法</title> <style> /*锚点样式开始*/ .test .hd{padding:10px 0;} .test .nav{position:fixed;right:10px;left: 540px;} .test .nav a{display:block;margin: 10px 0;} /*锚点样式结束*/ /*目标段落默认样式开始*/ .test .bd .panel{width:500px;margin-top:5px;border:1px solid #ddd;} .test .bd h2{border-bottom:1px solid #ddd;} h2,p{margin:0;padding:10px;font-size:16px;} /*目标段落默认样式结束*/ /*当前活动段落样式开始 边框变红色*/ .test .bd .panel:target{border-color:#f60;} .test .bd .panel:target h2{border-color:#f60;} </style> </head> <body> <div class="test"> <div class="hd nav"> <a href="#panel1">前往目标1</a> <a href="#panel2">前往目标2</a> <a href="#panel3">前往目标3</a> <a href="#panel4">前往目标4</a> <a href="#panel5">前往目标5</a> </div> <div class="bd"> <div id="panel1" class="panel"> <h2>目标1</h2> <div><p>目标1内容</p><p>目标1内容</p><p>目标1内容</p></div> </div> <div id="panel2" class="panel"> <h2>目标2</h2> <div><p>目标2内容</p><p>目标2内容</p><p>目标2内容</p></div> </div> <div id="panel3" class="panel"> <h2>目标3</h2> <div><p>目标3内容</p><p>目标3内容</p><p>目标3内容</p></div> </div> <div id="panel4" class="panel"> <h2>目标4</h2> <div><p>目标4内容</p><p>目标4内容</p><p>目标4内容</p></div> </div> <div id="panel5" class="panel"> <h2>目标5</h2> <div><p>目标5内容</p><p>目标5内容</p><p>目标5内容</p></div> </div> </div> </div> </body> </html>
效果图如下: