CSS样式表及选择器相关内容(二)-伪类与伪元素选择器

伪类与伪元素选择器归纳:

一.伪类选择器(伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中)
1.a标签伪类选择器，其他标签类似
eg:

<style type="text/css">
              /*设置a标签未访问样式*/
                a:link{
                    /*coral:珊瑚色*/
                    color: coral;
                }
                /*设置标签访问后样式*/
                a:visited{
                    color:red;
                }
                /*设置鼠标悬停a标签时的样式*/
                a:hover{
                    /*cyan:青色*/
                    color: cyan;
                    /*设置鼠标在a标签上显示为手指样式*/
                    cursor:pointer;
                }
                /*设置a标签点击后的样式*/
                a:active{
                    color: #ccc;
                }
</style>

View Code

   2.表示子元素的伪类选择器:(n也可以为:odd【奇数】、even【偶数】)
       :first-child 选中的所有子元素中的第一个孩子
       :last-child 选中的所有子元素中的最后一个孩子
       :nth-child(n) 选中所有子元素的第n个孩子
       :nth-last-child(n) 选中所有子元素的倒数第n个孩子
       :first-of-type    选中所有子元素中每种类型中的第一个孩子
       :last-of-type    选中所有子元素中每种类型中的最后一个孩子
       :nth-of-type(n) 选中所有子元素中每种类型中的第n个孩子
       :nth-last-of-type(n)    选中所有子元素中每种类型中的倒数第n个孩子

       :only-child 获取独生子元素，即选中元素中只含有他一个孩子

   3.伪类选择器-form表单:(:前面填写需选中元素对应的选择器)
       :focus     聚焦状态时使用的样式
       :disabled 标签禁用时使用的样式
       :enabled   标签可用时使用的样式
       :default   标签默认选中时使用的样式
       :checked   用户选中时使用的样式
       :valid     通过验证后使用的样式
       :invalid   不通过验证使用的样式
       :required 选中必填项时使用的样式
       :optional 选填项使用的样式
       :in-range 在范围内使用的样式
       :out-of-range 在范围外使用的样式


二.伪元素选择器(伪元素以"::"开头，用在选择器后，用于选择指定的元素。)
eg:

<style type="text/css">
        /*在指定元素之前添加内容*/
        section p::before{
            /*content属性值为要添加的内容*/
            content: '*';
            color: red;
        }

        /*在指定元素之后添加内容*/
        section p::after{
            /*content属性值为要添加的内容*/
            content: '*';
            color: red;
        }

        /*选中第一个字符*/
        section::first-letter{
            color: red;
            font-size: 30px;
        }
        /*选中第一行文字*/
        section::first-line{
            color: blue;
        }
        /*用户选中文本设置(只有自身内部文本有该样式效果，里面包含的元素内容不含有，即p标签不会有该样式效果)*/
        section::selection{
            background-color: teal;
            color: yellow;
        }
</style>
    <!-- body中内容 -->
<body>
    <article>
            <section>
                我是section第一段文字<br />
                我是section第二段文字
                <span>span</span>
                <p>第一段话</p>
                <p>第二段话</p>
                <p>第三段话</p>
                <p>第四段话</p>
            </section>
        </article>
</body>

View Code

作者：nzc 出处：https://www.cnblogs.com/nzcblogs/ 欢迎转载，也请保留这段声明。谢谢！文本中若叙述有误还请见谅！！！

欢迎评论！！！让我们共同进步。

原文地址：https://www.cnblogs.com/nzcblogs/p/11047356.html