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

 

posted @ 2019-06-18 20:03  nzc  阅读(456)  评论(0)  编辑  收藏  举报