怎么使用CSS3:target选择器-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

怎么使用CSS3:target选择器

怎么使用CSS3:target选择器?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

创新互联服务项目包括通化网站建设、通化网站制作、通化网页制作以及通化网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,通化网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到通化省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

一、怎么使用CSS3:target选择器

target是CSS3伪类选择器中的一种,用来匹配文本中某个标志符的目标元素。# 锚的名称是在一个文件中链接到元素的url,元素被链接到目标元素。:target选择器可用于当前激活的target元素的样式。

具体来说,url中一般会包含一个#,后面带一个名称,如#aa,:target就是匹配id为"aa"的目标元素。举个例子:如一个页面中有一个a标签,它的href如下:按钮3 ,同一个页面中也会有以box为id的元素,

相关内容3

那么a标签的href属性会链接到#box中,也就是box:target选择符所选的目标元素,它所指定的样式就是当a链接到这个元素时候,目标元素的样式。比如你如果想改变链接指向#tab的元素字体大小,你可以这样设置:#tab:target {font-size:30px}。

二、CSS3:target实例

就单纯用CSS实现,点击标题1,跳转到content 1,点击标题,2,跳转到content 2的效果。

HTML部分:

标题1

标题2

标题3

content 1

content 2

content 3

CSS部分:

:target
  {
   border: 2px solid #D4D4D4;
   background-color: #e5eecc;
   font-size:25px;
  }

图片效果:

怎么使用CSS3:target选择器

以上效果类似于tab的切换效果,你可以在:target伪类中设置你想要的效果,他的用法实际上与:hover、:link、:visited等伪类的用法一样。在这个案例中,当你点击标题2时,内容content 2会被激活,显示背景且字体变大,看看效果吧。

怎么使用CSS3:target选择器

感谢各位的阅读!看完上述内容,你们对怎么使用CSS3:target选择器大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联行业资讯频道。


文章题目:怎么使用CSS3:target选择器
本文网址:http://kswsj.cn/article/pcidcd.html

其他资讯