target选择器可以对页面中的target元素（该元素的id作为超链接来使用）指定样式。该样式只在点击了页面中超链接后，跳转到target元素其作用
我们来看点例子，就懂了
示例一
当用户点击了页面中的超链接(比如<a href="#text1">示例文字1</a>)跳转到该div元素(比如<div id="text1">...</div>),该div元素使用target选择器中指定的样式
css
:target{
background-color:yellow;
}
html
<body>
<a href="#text1">示例文字1</a>
<a href="#text2">示例文字2</a>
<a href="#text3">示例文字3</a>
<div id="text1">
<p>lallallal1111111</p>
</div>
<div id="text2">
<p>lallallal1222222</p>
</div>
<div id="text3">
<p>lallallal3333333</p>
</div>
</body>
示例二：实现页内tab切换
css
.target-demo{
position:relative;
margin:10%;
}
.table-content{
position:absolute;
width:300px;
min-height:250px;
padding:5%;
background:#fff;//只显示一个标签内容
}
.tabs{
position: absolute;
bottom:100%;
}
#tab1:target,#tab2:target,#tab3:target{
z-index:1; //实现跳转
}
html
<body>
<div class='target-demo'>
<div id='tab1' class='table-content'>
<p>css3的优点</p>
一个整个网站或其中一部分
网页的显示信息被集中在一个地方，要改变它们很方便
</div>
<div id='tab2' class='table-content'>
<p>Cascading Style
Sheets（层叠样式表／串樣式列表），简写为CSS，由W
3C定义和维护的标准，一种用来为结构化文档（如HTML
文档或XML应用）添加样式（字体、间距和颜色等）的
计算机语言。目前最新版本是CSS 2.1，为W3C的候选
推荐标准。下一版本CSS 3仍然在开发过程中。</p>
</div>
<div id='tab3' class='table-content'>
<p>HTML文件中的每一个class或id都可以有自己的显示特征，
而且每一个没有id特性的HTML结构也可以有自己的显示特征。</p>
</div>
<ul class='tabs'>
<a href="#tab1">标签一</a>
<a href="#tab2">标签二</a>
<a href="#tab3">标签三</a>
</ul>
</div>
</body>
每天努力一点点
谢谢你看完
网友评论