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. httpcomponent框架MultipartEntityBuilder addTextBody中文乱码

    版本4.5.6 String url = "https://172.16.3.50:8111/api/tts/offline"; HttpPost httpPost = new H ...

  2. （三）用CONCAT 函数 拼接字段

    一.将两个列拼接成一个列 数据源 select CONCAT(TRIM(username),'(',locaiton,')') from user2 解释: TRIM()函数用于去除字符串左右两边的空 ...

  3. orcad 删除不连接符号

    1. 双击不连接符号的引脚,如下面的1脚NC 2. 进入引脚的属性界面,取消Is No Connect

  4. Kubernetes StatefulSet

    StatefulSet 简介 在Kubernetes中,Pod的管理对象RC.Deployment.DaemonSet和Job都是面向无状态的服务.但现实中有很多服务是有状态的,特别是一些复杂的中间件 ...

  5. SpringBoot系列教程JPA之query使用姿势详解之基础篇

    前面的几篇文章分别介绍了CURD中的增删改,接下来进入最最常见的查询篇,看一下使用jpa进行db的记录查询时,可以怎么玩 本篇将介绍一些基础的查询使用姿势,主要包括根据字段查询,and/or/in/l ...

  6. Apache软件基金会核心项目Tomcat的那些事

    Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选.今天就来为大家介绍一下关于T ...

  7. Java spi 和Spring spi

    service provider framework是一个系统, 实现了SPI, 在系统里多个服务提供者模块可以提供一个服务的实现, 系统让客户端可以使用这些实现, 从而实现解耦. 一个service ...

  8. Redhat7.6Linux本地的yum源配置

    安装好虚拟机,配置Ip地址,见博客https://www.cnblogs.com/xuzhaoyang/p/11264573.html 我是使用的Xshell在外部链接进行的操作,比较简单,见博客ht ...

  9. PMBOK(第六版) PMP备考知识总汇！

    记录本人学习PMBOK第六版的学习笔记. 备考知识总汇! PMBOK序章 PMP备考指南之相关事项介绍 PMP备考指南之第一章:引论 PMP备考指南之第二章:项目运作环境 PMP备考指南之第三章:项目 ...

  10. c++连接打印机(转载)

    Visual C++6.0是开发Windows应用程序的强大工具,但是要通过它实现程序的打印功能,一直是初学者的一个难点,经常有朋友询问如何在VC中实现打印功能,他们往往感到在MFC提供的框架内实现这 ...