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>

效果图如下：

css 选择器 :root、:target 用法

猜你喜欢