HTML&CSS基础-伪类选择器

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.html源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>伪类选择器</title>

        <style>

            /**

             * 伪类

             *     功能:

             *         有时候，你需要选择本身没标签但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的连接。 CSS为他们提供一些选择。即伪类是专门用来表示元素的一种特殊状态

             *

             *     伪类给链接定义样式 给链接定义样式有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成 4种不同的状态。

             *        正常链接

             *            a:link

             *        访问过的链接

             *            a:visited(由于涉及到用户的隐私问题，所有使用visited伪类只能设置字体的颜色，只能定义字体颜色)

             *        鼠标滑过的链接

             *            a:hover

             *        正在点击的链接

             *            a:active

             *    浏览器是通过历史记录来判断一个链接是否被访问过。

             *

             *

             * 案例如下:

             *         为未访问过的连接设置黄绿色

             *         为访问过的连接设置一个颜色为红色

             *         为鼠标移入的状态设置为深紫色

             *         为超链接被点击的状态设置为深粉红色

             */

    /*        a:link{

                color: yellowgreen;

            }

            a:visited{

                color: red;

            }

            a:hover{

                color: brown;

            }

            a:active{

                color: deeppink;

            }*/

            /**

             *     ":hover"和":active"也支持其它标签哟，IE6中，不支持对超链接以外的元素设置，":hover"和":active"

             */

            p:hover{

                background-color: yellow;

            }

            p:active{

                background-color:darkorchid;

            }

            /**

             *     设置文本框背景颜色为黄色

             *

             */

            input:focus{

                background-color: yellow;

            }

            /**

             *     为p标签中选中的内容使用样式,可以使用"::selection伪类"

             *     这种写法只兼容火狐浏览器

             */

            p::-moz-selection{

                background-color: orange;

            }

            /**

             * 这种写法兼容大部分浏览器

             */

            p::selection{

                     background-color: orange;

               }

        </style>

    </head>

    <body>

        <a class="abc" href="https://www.cnblogs.com/yinzhengjie/">访问过的连接</a><br /><br />

        <a class="def" href="https:www.baidu.com">没有访问过的连接</a><br />

        <p>我是一个p标签</p>

        <!--

            使用input标签可以创建一个文本输入框

        -->

        <input type="text" />

    </body>

</html>

二.浏览器打开以上代码渲染结果

HTML&CSS基础-伪类选择器的更多相关文章

  1. css的伪类选择器的使用

    伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...

  2. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  3. HTML&CSS基础-伪元素选择器

    HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  4. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  5. CSS动态伪类选择器温故

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  6. CSS中伪类选择器及伪元素

    1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...

  7. 前端开发HTML&css入门——伪类选择器和一些特殊的选择器

    伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...

  8. css之伪类选择器:before :after(::before ::after)

    一.总结: ::before是在标签内容前面添加内容, ::after是在标签内容后面添加内容 ::before ::after与:before  :after的区别:css3中修订后的伪元素使用:: ...

  9. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

随机推荐

  1. ubuntu下MySQL忘记密码重置方法

    方法一: 1):编辑mysqld.cnf文件 sudo vi /etc/mysql/mysql.conf.d/mysqld.cnf 2):在文件中的skip-external-locking一行的下面 ...

  2. DataTable.NET的event執行順序

    var dataTable = $('#table') .on( 'processing.dt', function ( e, settings, processing ) { $('#loading ...

  3. 错误：net::ERR_BLOCKED_BY_CLIENT

    提示net::ERR_BLOCKED_BY_CLIENT错误 解决办法: 当我们查看浏览器第三方插件的时候,就会看到插件中存在“广告过滤插件”,其实,报错的原因就是第三方广告过滤插件在捣鬼, 当你关闭 ...

  4. POJ 1014 Dividing（入门例题一）

    Time Limit: 1000MS Memory Limit: 10000K Total Submissions: Accepted: Description Marsha and Bill own ...

  5. 十、Spring的@Profile注解

    首先我们来看看spring官方文档对这个注解的解释: The @Profile annotation allows you to indicate that a component is eligib ...

  6. Java的集合类之 List 接口用法

    集合其实在本质上面就是数据结构,它封装了一些底层的数据结构等操作进行操作. 集合的长度是可变的,用来存放对象的引用.常见的集合类有List集合.Set集合.Map集合. 1. List接口 List是 ...

  7. 小程序常用操作，if，for，跳转，弹出提示

    if <block wx:if="{{result.child_items}}"> ... </block> <block wx:else> . ...

  8. python爬虫scrapy（一）

    一,准备scrapy依赖组件环境,按照以下顺序安装 .wheel pip install wheel .lxml http:.PyOpenssl https://pypi.python.org/pyp ...

  9. 【计算机网络基础】URI、URN和URL的区别

    先引用一张关系图 灰色部分为URI URI强调的是给资源标记命名,URL强调的是给资源定位. URI是Uniform Resource Identifier,表示是一个资源: URL是Uniform ...

  10. Java开发笔记（一百三十）Swing的选择框

    不管是AWT还是Swing,都把选择框分成两类:复选框和单选按钮,这两类控件无论是外观上还是功能上均有显著差异.例如,在外观方面,复选框是在方框内打勾,而单选按钮是在圆圈内画圆点:在功能方面,复选框允 ...