欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css伪类中的:target的使用_html/css_WEB-ITnose

程序员文章站 2022-05-11 20:48:44
...
之前 :target伪类,我们已经接触过了. :target是css中伪类,主要是应用在url中的#链接,以及匹配对应的id名称.例如下面的例子:

代码名称

http://www.wutongwei.com/#home

对应的home 的结构为

代码名称

this is target

这种状态,我们可以通过CSS来体现他的效果.

代码名称

:target{

color:#ff6600;

}

这时候,当浏览这个链接的时候,就会将对应的有id的元素设置他的文字颜色为 #ff6600;

一个页面当然可以有多个target的目标,这时候,这个伪类的样式就适用所有的target元素,如果我们只是改变某个target的话.

这时候我们最好是在CSS上做好选择器的处理.比如

代码名称

this is target

this is another target

CSS上则使用:

代码名称

#home:target{

color:#ff6600;

}

这时候,当浏览http://www.wutongwei.com/#second的时候就不会应用伪类的CSS样式了.

target伪类使用经验:

1. 在在页面上做跳转时,要显示某种状态.

2. 有必要使用这个状态的元素.

3. 接受浏览器的history.

像target这种行为,我们可以在页面上的章节跳转或者评论第跳转等目标跳转.

或者使用在我们常说的tabs上使用.之前我们通常是使用JS来完成tabs的操作.现在可以通过这个伪类来实现.还有就是菜单都可以用这个来实现,等等.

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=189 ,欢迎大家传播与分享.