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. Cannot start service WMSvc on computer '.'.

    批处理,管理员权限执形 taskkill /im wmsvc.exe /f net stop WMSVC net start WMSVC pause

  2. tushare包使用案例

    Tushare是一个免费.开源的python财经数据接口包.主要实现对股票等金融数据从数据采集.清洗加工 到 数据存储的过程,能够为金融分析人员提供快速.整洁.和多样的便于分析的数据,为他们在数据获取 ...

  3. 基于Emit的C#下DataTable转实体类方法,一直报错.

    xxxx ;WITH Tab AS ( SELECT CAST(ROW_NUMBER()OVER(ORDER BY CC.CreateTime DESC) AS INT) AS Sequency, ) ...

  4. Java之整数运算

    Java的整数运算遵循四则运算规则,可以使用任意嵌套的小括号.四则运算规则和初等数学一致.例如: public class Main { public static void main(String[ ...

  5. Component 'TABCTL32.OCX'错误的处理方法

    错误:Component 'TABCTL32.OCX' or one of its dependencies not correctyly registered:a file is missing o ...

  6. Echartjs axis.getAxesOnZeroOf is not a function

    该问题已经解决,下面是解决思路! 问题描述: axis.getAxesOnZeroOf is not a function 使用echart 出现报这句错误,请求解决方案! 问题原因: 我给坐标设置了 ...

  7. Oracle和Mysql中的字符串的拼接

    SQL允许两个或者多个字段之间进行计算,字符串类型的字段也不例外.比如我们需要 以"工号+姓名"的方式在报表中显示一个员工的信息,那么就需要把工号和姓名两个字符 串类型的字段拼接计 ...

  8. python实践项目八：生成随机试卷文件

    描述:匹配美国50个州的首府. 下面是程序需要完成的任务: • 创建35 份不同的测验试卷. • 为每份试卷创建50 个多重选择题,次序随机. • 为每个问题提供一个正确答案和3 个随机的错误答案,次 ...

  9. QT5 添加resource的方法

    在工程中右键点击xxx.qrc文件,选择"open in editor",然后可以用"Add ""Remove"按钮进行资源文件的添加.

  10. 04 Mybatis 框架的环境搭建及入门案例

    1.搭建 Mybatis 开发环境 mybatis的环境搭建 第一步:创建maven工程并导入坐标 第二步:创建实体类和dao的接口 第三步:创建Mybatis的主配置文件 SqlMapConifg. ...