CSS中的伪类选择器和伪元素选择器的代码分析

本篇文章给大家带来的内容是关于CSS中伪类选择器以及伪元素选择器的介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、链接伪类

1、链接伪类

        /*链接伪类*/        注意:link，:visited，:target是作用于链接元素的！                :link       表示作为超链接，并指向一个未访问的地址的所有锚                :visited    表示作为超链接，并指向一个已访问的地址的所有锚                :target     代表一个特殊的元素，它的id是URI的片段标识符

登录后复制

2、代码实例：
01_锚点伪类.html

                                            a{                text-decoration: none;            }            a:link{                color: deeppink;            }            #test:link{                background: pink;            }                        点我点我点我        
我是p啦
    

登录后复制

02_锚点伪类.html

                                            a{                text-decoration: none;            }            a:link{                color: black;            }            a:visited{                color: pink;            }                        点我点我点我    

登录后复制

03_target.html

                                             *{                margin: 0;                padding: 0;            }            p{                width: 300px;                height: 200px;                line-height: 200px;                background: black;                color: pink;                text-align: center;                display: none;            }            :target{                display: block;            }                        p1        p2        p3        
            p1        
        
            p2        
        
            p3        
    

登录后复制

二、动态伪类

1、动态伪类

立即学习“前端免费学习笔记（深入）”；

        /*动态伪类*/        注意:hover，:active基本可以作用于所有的元素！                :hover      表示悬浮到元素上                :active     表示匹配被用户激活的元素（点击按住时）注意：由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！！！

登录后复制

2、代码实例：

                                        #test:hover{                color: pink;            }            #test:active{                color: red;            }                        
            我是test        
    

登录后复制

三、隐私与:visited选择器

1、隐私与:visited选择器

/*隐私与:visited选择器*/只有下列的属性才能被应用到已访问链接：    color  background-color  border-color

登录后复制

四、表单相关伪类

1、表单相关伪类

    /*表单相关伪类*/    :enabled    匹配可编辑的表单        :disable    匹配被禁用的表单        :checked    匹配被选中的表单        :focus      匹配获焦的表单

登录后复制

2、代码实例：
01_表单状态.html

                                    input {                width: 100px;                height: 30px;                color: #000;            }            input:enabled {                color: red;            }            input:disabled {                color: blue;            }                                    

登录后复制

02_表单状态.html

                                    input:checked {                width: 100px;                height: 100px;            }                            

登录后复制

03_获取焦点.html

                                    input:focus{                background: pink;            }            p:focus{                background: pink;            }                                
    

登录后复制

04_模拟单选框.html

                                    label {                float: left;                margin: 0 5px;                overflow: hidden;                position: relative;            }            label input {                position: absolute;                left: -50px;                top: -50px;            }            span {                float: left;                width: 50px;                height: 50px;                border: 3px solid #000;            }            input:checked~span {                background: red;            }                                                                                                        

登录后复制

四、结构性伪类

1、结构性伪类

/*结构性伪类*/index的值从1开始计数！！！！index可以为变量n(只能是n)index可以为even odd    #wrap ele:nth-child(index)      表示匹配#wrap中第index的子元素 这个子元素必须是ele    #wrap ele:nth-of-type(index)    表示匹配#wrap中第index的ele子元素    除此之外:nth-child和:nth-of-type有一个很重要的区别！！            nth-of-type以元素为中心！！！:nth-child(index)系列             :first-child    :last-child    :nth-last-child(index)    :only-child (相当于:first-child:last-child 或者 :nth-child(1):nth-last-child(1)):nth-of-type(index)系列    :first-of-type    :last-of-type    :nth-last-type(index)    :only-of-type   (相当于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1)):not        :empty(内容必须是空的，有空格都不行，有attr没关系)

登录后复制

2、代码实例：

                                    /*子元素的标签应该要统一*/            /*ul .item:nth-child(3){                border: 1px solid;            }*/            ul .item:nth-of-type(3){                border: 1px solid;            }            /*ul p:nth-of-type(3){                border: 1px solid;            }            ul p:nth-of-type(3){                border: 1px solid;            }            ul li:nth-of-type(3){                border: 1px solid;            }*/                        

登录后复制            

p1

p2

p3

            1            2            3            4            5            

p1

p2

p3

            6            7            8            9            

04_not.html

                                    * {                margin: 0;                padding: 0;                border: none;            }            a {                text-decoration: none;                color: #333;                font-size: 14px;                display: block;                float: left;                width: 100px;                height: 30px;            }            p {                width: 800px;                margin: 0 auto;            }            p>a:not(:last-of-type) {                border-right: 1px solid red;            }                        
            first            second            third            fourth            fifth        
    

登录后复制

05_empty.html

                                    p {                height: 200px;                background: #abcdef;            }            p:empty {                background: #f00;            }                        
        
Second
        
        
Third
    

登录后复制

五、伪元素

1、伪元素

/*伪元素*/    ::after    ::before    ::firstLetter    ::firstLine    ::selection

登录后复制

2、代码实例：
after.html

                                    p {                width: 300px;                height: 100px;                border: 1px solid #000;            }            p::after {                content: "我在内容的后面";            }                        
伪元素
    

登录后复制

before.html

                                    p {                width: 300px;                height: 100px;                border: 1px solid #000;            }            p::before {                content: "我在内容的前面";            }                        
伪元素
    

登录后复制

firstLetter.html

                                    p {                width: 500px;                margin: 0 auto;                font-size: 12px;            }            p::first-letter {                color: #f00;                font-size: 24px;                font-weight: bold;            }                        
sssss
    

登录后复制

firstLine.html

                                    p {                width: 500px;                margin: 0 auto;            }            p::first-line {                color: #f00;                font-weight: bold;            }                        
            sssss
 sssss            
 sssss            
        
    

登录后复制

selection.html

                                    p::selection {                background: red;                color: pink;            }                        
SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection
    

登录后复制

相关推荐：

CSS中一些利用伪类、伪元素和相邻元素选择器的技巧

CSS中一些利用伪类、伪元素和相邻元素选择器的技巧

以上就是CSS中的伪类选择器和伪元素选择器的代码分析的详细内容，更多请关注【创想鸟】其它相关文章！