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 ,欢迎大家传播与分享.