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. windows系统下同时安装mysql5.5和8.0.11

    前提:电脑已安装5.5,增安装8.0.11 zip版本 1.官网下载mysql10.8.0.11 —找到mysql community server 为下载页面URL:https://dev.mysq ...

  2. django 表操作

    添加表纪录 # Create your models here. class Book(models.Model): id = models.AutoField(primary_key=True) t ...

  3. PS弧形边缘的去黑色背景色

    按照理论来说,纯色的字体加上纯色的背景,然后保存成png文件,然后用色彩范围选择纯色的背景,去掉背景,这样应该能得到原来设置的纯色的字体,但实际测试后不是这样的.如果是矩形等,是纯色,但是Photos ...

  4. 170道python面试题（转）

    作者:麋鹿链接:https://www.zhihu.com/question/54513391/answer/779646691来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  5. 【SSH进阶之路】Spring的AOP逐层深入——AOP的基本原理(六)

    经过我们对Spring的IOC不断的深入学习,Spring的面貌逐渐变得清晰,我们对Spring的了解也更加的深入.从这篇博文开始我们学习Spring的第二大核心内容:AOP. 什么是AOP AOP( ...

  6. DHCP的配置方法

    1.实验拓扑图: 2.配置命令: AR2: <Huawei>system-view[Huawei]dhcp enable      #开启DHCP服务[Huawei]interface G ...

  7. WordPress 设计学习

    "One can never be defeated until defeat has been accepted as a reality"----- Bruce Lee 官网免 ...

  8. LeetCode | 142. 环形链表 II

    原题(Medium): 给定一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始) ...

  9. 关于TI公司DSP工程调用DELAY_US()进入非法中断问题的解决

    最近笔者在调试一个DSP程序时,发现在ad外设初始化时无法正常执行,单步检查,发现当执行到调用 DELAY_US(1000);语句时,就跳入非法. 进一步追查,DELAY_US()是宏定义函数,在笔者 ...

  10. 【C#】上机实验七

    .开发一个窗体应用程序,窗体上能接收华氏温度或者摄氏温度,点击相应按钮可以相互转换. 要求转换后的华氏温度或者摄氏温度保留小数点后3位,程序中要有异常处理结构. using System; using ...