RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
css中target的用法-创新互联

小编给大家分享一下css中target的用法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联公司专注于万载企业网站建设,响应式网站开发,商城网站制作。万载网站建设公司,为万载等地区提供建站服务。全流程按需设计网站,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务

css target是指“:target”选择器,可用于选取当前活动的目标元素,其使用语法如“#tab:target {color:blue}”,该语句表示改变锚链接指向“#tab”的元素字体颜色为蓝色。

css :target选择器

URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。

:target 选择器可用于选取当前活动的目标元素。

CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式。【相关推荐:css在线手册】

例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成:

#tab:target {color:blue}

浏览器支持:

不支持IE8及以下的IE版本,IE9支持这个属性,其它非IE内核浏览器如:Firefox、Chrome、等这些浏览器都支持。

用法:

:target伪类与:hover、:link、:visited、:focus等伪类的用法一样

:target {color:blue}

实例:CSS3 :target伪类实现Tab切换效果

下面简单介绍下如何用csse :target来制作一个无JavaScript的tab切换效果

HTML代码:

tab1 content
tab2 content
tab3 content

CSS代码:

.tab_content {
position: absolute;
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}

原理其实很简单,就是把tab元素设为绝对对定位absolute,再通过:target伪类改变它们的层级(z-index)。

以上是“css中target的用法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前文章:css中target的用法-创新互联
网站路径:http://lswzjz.com/article/jeedj.html