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. [转]npm 遇到 write access的问题怎么办

    ubuntu下使用 npm install -g 可能会遇到这个问题. 链接地址:https://www.jianshu.com/p/31744aa44824

  2. app内嵌h5页面在ios手机端滑动卡顿的解决方法

    1.带滚动条的dom需加样式 -webkit-overflow-scrolling: touch;2.去掉 width:100%; height:100%

  3. ABP vNext

    一.简要介绍# ABP vNext 是 ABP 框架作者所发起的新项目,截止目前 (2019 年 8 月 20 日) 已经拥有 1400 多个 Star,最新版本号为 v 0.19.0,可以尝试用于生 ...

  4. java File源码理解，探索File路径

    1.方法: new File(path); 我们知道根据输入的路径path的不同 ,File可以根据path的不同格式,来访问文件.那么,path的形式有几种呢? 根据源码 可以知道,输入的路径pat ...

  5. LeetCode 343. 整数拆分(Integer Break) 25

    343. 整数拆分 343. Integer Break 题目描述 给定一个正整数 n,将其拆分为至少两个正整数的和,并使这些整数的乘积最大化. 返回你可以获得的最大乘积. 每日一算法2019/5/2 ...

  6. redhat7.6Linux安装Oracle19C完整版教程

    首先安装配置虚拟机,见博客https://www.cnblogs.com/xuzhaoyang/p/11264563.html 然后配置IP地址,见博客https://www.cnblogs.com/ ...

  7. Prometheus入门到放弃(7)之redis_exporter部署

    redis监控,prometheus需要使用redis_exporter客户端. 这里我们采用docker方式部署,既可以部署在redis所在服务器,也可以部署在其他机器: docker镜像地址:ht ...

  8. 92. 反转链表 II

    反转从位置 m 到 n 的链表.请使用一趟扫描完成反转.   说明: 1 ≤ m ≤ n ≤ 链表长度.   示例: 输入: 1->2->3->4->5->NULL, m ...

  9. django settings.py 配置文件

    目录 settings.py 配置文件 settings.py 配置文件 import os BASE_DIR = os.path.dirname(os.path.dirname(os.path.ab ...

  10. pt-archiver 归档历史数据及参数详解

    目录 1. 背景 2. 操作步骤 2.1. 确认数据归档条件,此次操作开发按照非主键列 server_time 按时间进行删除并保存,需要转化为主键列条件. 2.2. 由于历史表文件较大,按月归档.删 ...