CSS3 target选择器

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>

每天努力一点点
谢谢你看完


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,683评论 1 92
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 4,994评论 0 1
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,690评论 32 459
  • 见过很多女生遇见麻烦的第一反应就是求助于别人,也许她楚楚可怜的样子真的很让人心疼,可是姑娘,你用委屈换来的同情不是...
    吖i阅读 1,794评论 0 1
  • 之前在无意间在知乎得知有WorkFlowy这个神器,很多人用,貌似很赞,所以也尝试了一下。这一用就是一个月,现在说...
    沉睡的牛仔阅读 4,855评论 0 1