怎么使用CSS3:目标选择器

  介绍

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

<强>一,怎么使用CSS3:目标选择器

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

具体来说,url中一般会包含一个#,后面带一个名称,如# aa,:目标就是匹配id为“aa"的目标元素。举个例子:如一个页面中有一个一个标签,它的href如下:& lt; a href=https://www.yisu.com/zixun/?盒子”>按钮3 ,同一个页面中也会有以盒子为id的元素,

相关内容3

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

<强>二,CSS3:目标实例

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

HTML部分:

& lt; p> https://www.yisu.com/zixun/& lt; a href=" # news1 ">标题1

  

标题2

  

标题3

  

内容1

  

内容2

  

内容3

CSS部分:

:目标   {   边界:2 px固体# D4D4D4;   background - color: # e5eecc;   字体大小:25 px;   }

图片效果:

怎么使用CSS3:目标选择器

以上效果类似于标签的切换效果,你可以在:目标伪类中设置你想要的效果,他的用法实际上与:悬停,:链接,访问等伪类的用法一样。在这个案例中,当你点击标题2时,内容内容2会被激活,显示背景且字体变大,看看效果吧。

怎么使用CSS3:目标选择器

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

怎么使用CSS3:目标选择器