• 技术文章 >web前端 >前端问答

    css目标选择器有哪些

    青灯夜游青灯夜游2021-06-08 11:59:28原创107

    在css中,目标选择器有“:target”。“:target”选择器称为目标选择器,用来选取当前活动的目标元素,匹配文档(页面)的url的某个标志符的目标元素;语法格式“元素:target{css代码样式}”。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    :target是CSS里一个非常有趣的伪类选择器。:target选择器称为目标选择器,可用于选取当前活动的目标元素,匹配文档(页面)的url的某个标志符的目标元素。

    :target选择器在CSS里发生效力的过程是这样的:当浏览器地址里的hash(地址里#号后面的部分)和:target伪选择器指定的ID匹配上时,它的样式就会在这个ID元素上生效。

    示例1

    下面的两个HTML元素上我们都指定了ID:

    <h2 id="section1">Section 1</h2>
    <h2 id="section2">Section 2</h2>

    注意上面元素的ID值,当:target指定的ID和window.location.hash值一致时,伪选择器的样式将会生效。

    :target伪选择器可以配合CSS类、网页标记和任何其它CSS选择器使用:

    /* would apply to all targetted elements */
    :target {
    color: #000;
    }
    /* applies to H2's */
    h2:target {
    color: #f00;
    }

    当window.location.hash是”section2″时,ID为”section2″的元素将会变红,并显示下划线。

    效果图:

    1.gif

    (学习视频分享:css视频教程

    以上就是css目标选择器有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 目标选择器
    上一篇:css a怎么去掉下划线 下一篇:css样式由哪两部分组成
    第16期线上培训班

    相关文章推荐

    • css中如何定义使用变量• vs中css缩进设置如何调整• css中内边框是什么• 你值得了解的一种CSS获取图片主题色的小技巧(分享)• 利用CSS绘制三角形的6种技巧(分享)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网