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

一.伪类选择器(伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中)
    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>

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>

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

  1. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  2. CSS样式表 选择器

    1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...

  3. 【3-24】css样式表分类、选择器、样式属性

    一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> ...

  4. CSS选择器及CSS样式表

    前言 牛腩新闻发布系统中记忆最深的就是各种CSS选择器各种CSS样式,这些选择器之间肯定有它的优先级,包括CSS样式也一样,也是有它的优先级,本文介绍一些各种CSS选择器各种CSS样式以及它们的优先级 ...

  5. css样式表中四种属性选择器

    学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...

  6. css样式表---样式表分类、选择器

    一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; bo ...

  7. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

  8. 8.20 css样式表：样式分类，选择器。样式属性，

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  9. css样式表：样式分类，选择器。样式属性，格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

随机推荐

  1. MAC TXT文本

    Mac系统下.txt格式的纯文本怎么保存? 作者:佚名 字体:[增加 减小] 来源:互联网 时间:06-02 14:29:23 我要评论 Mac系统下.txt格式的纯文本怎么保存?.txt是个用途广泛 ...

  2. 微信小程序访问webservice（wsdl）+ axis2发布服务端(Java)

    0.主要思路:使用axis2发布webservice服务端,微信小程序作为客户端访问.步骤如下: 1.服务端: 首先微信小程序仅支持访问https的url,且必须是已备案域名.因此前期的服务器端工作需 ...

  3. 使用 Vim 搭建 C/C++ 开发环境

    原文链接: https://spacevim.org/cn/use-vim-as-a-c-cpp-ide/ SpaceVim 是一个模块化的 Vim IDE,针对 C/C++ 语言的支持主要依靠 la ...

  4. hisi mmz模块驱动讲解

    一.概述 如图所示,在海思平台上将内存分为两个部分:os内存和mmz内存.os内存指:由linux操作系统管理的内存:mmz内存:由mmz驱动模块进行管理供媒体业务单独使用的内存,在驱动加载时可以指定 ...

  5. layer重复弹出(layui弹层同时存在多个)的解决方法

    layer.open() 同时存在多个;解决 layui 弹层 layer 同时存在多个页面层(iframe)的问题 这个问题其实是疏忽了一些 基础参数(仔细看文档,仔细看文档,仔细看文档) 一.ty ...

  6. K60时钟分析

    转载:https://blog.csdn.net/hcx25909/article/details/7164650 1.飞思卡尔K60时钟系统          飞思卡尔K60时钟系统如上图所示,可以 ...

  7. Could not resolve resource location pattern [classpath:com/****/mappers/*.xml]: class path resource [com/****/mappers/] cannot be resolved to URL because it does not exist的问题

    这里建议先去看看路径的问题,看看application.xml的里面的导入的相应的配置文件的路径有没有问题,如下: 再者看看相应的注解有没有加上,service和controller等的注解 如果再不 ...

  8. 编译 lineageos 14.1 on OnePlus3

    breakfast oneplus3 命令的主要作用是 1.执行 vendorsetup.sh 2. variant 默认设置为 userdebug 3. 根据机型判断 调用  lunch  cm 或 ...

  9. Node版本管理器NVM常用命令

    NVM是什么?nvm (Node Version Manager) 是Nodejs版本管理器,可对不同的node版本快速进行切换. 为什么要用NVM?基于node的工具和项目越来越多,但是每个项目使用 ...

  10. c# WF 第3节 窗体的属性

    本节内容: 1:如何找到窗口属性 2:窗口属性 1:如何找到窗口属性 2:窗口属性