css target怎么用

最新推荐文章于 2021-08-03 21:27:50 发布

fef647

最新推荐文章于 2021-08-03 21:27:50 发布

阅读量2.8k

点赞数

本文链接：https://blog.csdn.net/fef647/article/details/113927271

版权

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

本教程操作环境：windows7系统、css3版，该方法适用于所有品牌电脑。

推荐：《css视频教程》

css :target选择器

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

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

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

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

1

#tab:target {color:blue}

浏览器支持：

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

用法：

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

1

:target {color:blue}

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

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

HTML代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

tab1 content

tab2 content

tab3 content

CSS代码：

1

2

3

4

5

6

.tab_content {

position: absolute;

}

#tab1:target, #tab2:target, #tab3:target {

z-index: 1;

}

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

fef647

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
css target怎么用

css target是指“:target”选择器，可用于选取当前活动的目标元素，其使用语法如“#tab:target {color:blue}”，该语句表示改变锚链接指向“#tab”的元素字体颜色为蓝色。本教程操作环境：windows7系统、css3版，该方法适用于所有品牌电脑。推荐：《css视频教程》css :target选择器URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素
复制链接

扫一扫