网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
最近在梳理CSS的知识,发现了很多知识盲区,归根结底还是以前学习的时候低估了CSS,认为它太简单,应该把重点放在JS上面。今天就分享一个实用的CSS3小知识,即
css3:target选择器,还可以用
css3:target做一个类似tab的切换效果。相信很多人应该也不熟悉这是属性吧。那继续往下看吧。
一、怎么使用CSS3:target选择器
target是CSS3伪类选择器中的一种,用来匹配文本中某个标志符的目标元素。# 锚的名称是在一个文件中链接到元素的url,元素被链接到目标元素。:target选择器可用于当前激活的target元素的样式。
具体来说,url中一般会包含一个#,后面带一个名称,如#aa,:target就是匹配id为"aa"的目标元素。举个例子:如一个页面中有一个a标签,它的href如下:<a href="#box">按钮3</a> ,同一个页面中也会有以box为id的元素,<div id="box">相关内容3</div>
那么a标签的href属性会链接到#box中,也就是box:target选择符所选的目标元素,它所指定的样式就是当a链接到这个元素时候,目标元素的样式。比如你如果想改变链接指向#tab的元素字体大小,你可以这样设置:#tab:target {font-size:30px}。
二、CSS3:target实例
就单纯用CSS实现,点击标题1,跳转到content 1,点击标题,2,跳转到content 2的效果。
HTML部分:
<p><a href="#news1">标题1</a></p>
<p><a href="#news2">标题2</a></p>
<p><a href="#news3">标题3</a></p>
<p id="news1"><b>content 1</b></p>
<p id="news2"><b>content 2</b></p>
<p id="news3"><b>content 3</b></p>