CSS 伪类 (Pseudo-classes)实例
CSS 伪类用于向某些选择器添加特殊的效果
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}       /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF}   /* 鼠标移动到链接上 */
a:active {color: #0000FF}  /* 选定的链接 */

###########
伪类
W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性 描述 CSS
:active    向被激活的元素添加样式。   1
:focus 向拥有键盘输入焦点的元素添加样式。  2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。   1
:link  向未被访问的链接添加样式。  1
:visited   向已被访问的链接添加样式。  1
:first-child   向元素的第一个子元素添加样式。    2
:lang  向带有指定 lang 属性的元素添加样式。  2
#####################

1.超链接
本例演示如何向文档中的超链接添加不同的颜色。
    <style type="text/css">
        a:link {color:#0000FF}
        a:visited{color:#00FF00}
        a:hover{color:#FF00FF}
        a:active{color:#0000FF}
    </style>
</head>
<body>

<p><b><a href="test1.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>在定义中，a:hover必须位于a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在Css定义中， a:active 必须位于a:hover 之后，这样才能生效！</p>

2.超链接 2
本例演示如何向超链接添加其他样式。

    <style type="text/css">
        a.one:link {color:#ff0000;}
        a.one:visited{color:#0000ff;}
        a.one:hover{color:#ffcc00;}

        a.two:link {color:#ff0000;}
        a.two:visited{color:#0000ff;}
        a.two:hover{font-size:150%;}

        a.three:link {color:#ff0000;}
        a.three:visited{color:#0000ff;}
        a.three:hover{background:#66ff66;}

        a.four:link {color:#ff0000;}
        a.four:visited{color:#0000ff;}
        a.four:hover{font-family:monospace}

        a.five:link {color:#ff0000;text-decoration: none;}
        a.five:visited{color:#0000ff;text-decoration: none;}
        a.five:hover{color:#ffcc00;underline;}

    </style>
</head>
<body>
<p>请把鼠标移动到这些链接上，以查看效果：</p>
<p><b><a class="one" href="test1.html" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="test1.html" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="test1.html" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="test1.html" target="_blank">这个链接改变字体系列</a></b></p>
<p><b><a class="five" href="test1.html" target="_blank">这个链接改变文本装饰</a></b></p>
</body>

3.超链接：:focus 的使用
本例演示如何使用 :focus 伪类（无法在 IE 中工作）。
    <style type="text/css">
        input:focus{

        }
    </style>
</head>
<body>

<form action="test1.html" method="get">
    First name:<input type="text" name="fname" /><br/>
    Last name:<input type="text" name="lname" /><br/>
    <input type="submit" value="Submit" />
</form>

<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。</p>
</body>

4.:first-child（首个子对象）
本例演示 :first-child 伪类的用法。

    <style type="text/css">
        p:first-child{font-weight:bold;}
        li:first-child{text-transform: uppercase;}
    </style>
</head>
<body>
<div>
    <p>These are the necessary steps:</p>
    <ul>
        <li>Intert key</li>
        <li>Turn key<strong>clockwise</strong></li>
        <li>Push accelerator</li>
    </ul>
    <p>Do <em>not</em> Push the</p>
</div>

CSS 伪类 (Pseudo-classes)实例的更多相关文章

  1. css 伪类选择器:checked实例讲解

    css :checked伪类选择器介绍 css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择 ...

  2. 谈谈css伪类与伪元素

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. ...

  3. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  4. [转] 用javascript修改css伪类的几种方法

    用javascript修改css伪类的几种方法: Modify pseudo element styles with JavaScript http://pankajparashar.com/post ...

  5. CSS：CSS 伪类(Pseudo-classes)

    ylbtech-CSS:CSS 伪类(Pseudo-classes) 1.返回顶部 1. CSS 伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果. 语法 伪类的语法: ...

  6. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  7. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  8. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  9. CSS 伪类

    Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...

随机推荐

  1. GlusterFS 安装 on centos7

    本文演示如何在CentOS7上安装,配置和使用GlusterFS. 1 准备工作 1.1 基础设施 编号 IP OS 主机名 角色 说明 A 192.168.1.101 CentOS7.4 ddc_n ...

  2. vue分页组件二次封装---每页请求特定数据

    关键步骤: 1.传两个参数:pageCount (每页条数).pageIndex (页码数): 2.bind方法的调用 <!-- 这部分是分页 --> <div class=&quo ...

  3. timeout 命令

    命令简介 运行指定的命令,如果在指定时间后仍在运行,则杀死该进程.用来控制程序运行的时间. 使用方法 1 2 3 timeout [选项] 数字[后缀] 命令 [参数]... 后缀 s 代表秒(默认值 ...

  4. CVE-2012-0158 分析

    目录 CVE-2012-0158 分析&利用 1.实验环境 2.下载poc样本 3.调试并找到漏洞触发点 4.分析漏洞触发模块及流程 5.漏洞利用 6.总结 7.参考资料 CVE-2012-0 ...

  5. echo '1'.print(2)+3; 的输出结果为什么是511

    今天看到一道有趣的题目,如上所示.结果为什么会是511呢? 这个结果的计算分为三步来理解: 首先计算的是 右边print(2)+3,这个你可以直接理解成print(2+3),得到的结果是5.而prin ...

  6. python——函数之装饰器

    1 问题 实际生活中,我们很难一次性就把一个函数代码写得完美无缺.当我们需要对以前的函数添加新功能时,我们应该怎么做? 2 问题解决思路 (1)可以直接修改原来的函数,在函数内直接修改.当我们对多个函 ...

  7. May 23. 2018 Week 21st Wednesday

    You should love and take care of yourself because after all, it is your own life. 要学会爱自己,照顾自己,毕竟生活是你 ...

  8. linux上部署SpringBoot项目及遇到的问题

    打开sftp步骤, 在显示的已连接的窗口上右键, 选择connect SFTP Session就可以打开文件上传的窗口 从windows上传文件到linux, 首先linux需要先切换到想要保存文件的 ...

  9. MY Views on Doctor-patient relationship 英语医患关系议论文

    MY Views on Doctor-patient relationship Author:Pleiades_Antares(www.cnblogs.com/irischen) 1. In rece ...

  10. 我的BRF+自学教程（二）：跟踪模式（trace mode）

    使用自开发程序来处理业务逻辑时,处理过程通常是个黑箱,业务顾问和业务用户不知道程序的具体运行方式,要依赖文档和频繁的沟通来确认实际情况. BRFplus可以通过配置的方式实现业务逻辑,使得业务人员把业 ...