• 技术文章 >web前端 >css教程

    css中伪类与伪元素如何使用

    清浅清浅2018-11-24 10:22:44原创1669
    伪类可以通过link,hover等方法给选择器添加特殊效果,伪元素通过:first-line添加首行样式,:first-letter添加首字母样,以下将详细介绍这两方面的内容

    伪类

    它是选择html文档的某些部分的方式,表示随着时间的推移或通过用户干预进入或者退出时元素的动态状态,原则上不属于html文档树本身及其元素或者是属性,其实CSS伪类是用来添加一些选择器的特殊效果,与伪元素不同,伪类可以出现在选择器链中的任何位置。

    a:link 表示未访问过的链接

    <style>
    a:link{
    background-color: pink;
    }

    Image 1.jpg

    a : visit表示已访问过的链接

    a:visited{
    background-color: pink;
    }


    Image 7.jpg

    a:hover当鼠标移动到链接上时

    a:hover{
    background-color: pink;
    }

    Image 1.jpg

    a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!

    a:active :表示选中的链接

    a:hover{
    background-color: pink;
    }
    		a:active{
    background-color: pink;
    }

    Image 6.jpg

    注意active一定要用在hover后面才会生效

    伪元素

    伪元素用于向某些选择器设置特殊效果,而且只能应用于外部和文档级上下文 , 而不是内嵌样式。它们可能只出现在选择器链的末尾,每个选择器只能指定一个伪元素。要在单个元素结构上处理多个伪元素,必须创建多个样式选择器或声明语句。

    :first-line伪元素

    用于向文本的首行设置特殊样式,只能用于块级元素

    可以修改以下属性font,color,background,word-spacing,letter-spacing等

    p:first-line 
    {
    color: pink;
    font-variant: small-caps;/*改为大写*/
    
    }
    </style>
    </head>
    <body>
    <p>
    you are very good!
    </p>


    适用首行

    Image 8.jpg

    :first-letter伪元素

    用于向文本的首字母设置特殊样式:

    可以修改font,color,background,margin,padding,border等属性

    p:first-letter 
    {
    color: pink;
    font-variant: small-caps;/*改为大写*/
    
    }
    </style>
    </head>
    <body>
    <p>
    you are very good!

    仅适用于首字母

    Image 9.jpg


    总结:以上就是本篇文章的全部内容了,希望对大家的学习有所帮助。

    以上就是css中伪类与伪元素如何使用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:伪类,伪元素
    上一篇:跨列column-span属性详解 下一篇:css如何让div隐藏?css隐藏div方法
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• css中伪类和伪元素之:after• 实例示范CSS中伪类选择器hover的使用方法• css中伪类和伪元素有什么区别?:before和::before的区别
    1/1

    PHP中文网