温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS3目标伪类选择器target怎么用

发布时间:2022-03-02 15:15:48 来源:亿速云 阅读:522 作者:iii 栏目:web开发

这篇文章主要讲解了“CSS3目标伪类选择器target怎么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS3目标伪类选择器target怎么用”吧!

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

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

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

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

    二、CSS3:target实例

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

    HTML部分:

    <p>标题1</p>

    <p>标题2</p>

    <p>标题3</p>

    <pid="news1"><b>content1</b></p>

    <pid="news2"><b>content2</b></p>

    <pid="news3"><b>content3</b></p>

    CSS部分:

    :target

    {

    border:2pxsolid#D4D4D4;

    background-color:#e5eecc;

    font-size:25px;

    }


CSS3目标伪类选择器target怎么用CSS3目标伪类选择器target怎么用

感谢各位的阅读,以上就是“CSS3目标伪类选择器target怎么用”的内容了,经过本文的学习后,相信大家对CSS3目标伪类选择器target怎么用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI