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. （三）版本控制管理器之CVS（下）

    在上一篇文章<(二)版本控制管理器之CVS(上)>中,我为大家介绍了什么是CVS.CVS的特点.CVS的安装.CVSNT服务器的配置.TortoiseCVS客户端的配置等,本篇文章继续为大 ...

  2. Docker Data Center系列（五）- 使用自定义的TLS安全认证

    本系列文章演示如何搭建一个mini的云平台和DevOps实践环境. 基于这套实践环境,可以部署微服务架构的应用栈,演练提升DevOps实践能力. 1 名词说明 CSR: Certificate Sig ...

  3. 解决Spark filter过滤条件中使用>=或<=时不识别的问题

    一.场景 val jldxx_zxzq = jldxx_with_dddf .withColumn("ZXZQ", zxzq(col("CBZQ"))) .fi ...

  4. c#判断两个对象和对象中的属性是否相同（以及记录对象中的哪些字段，和详细的改变情况）

    当前项目需要记录变更记录,即用户在进行编辑后,将变更操作记录下来.但是数据没有发生变化,则不记录. 代码1:(仅仅返回是否变化的标识) /// <summary> /// 反射对比实体属性 ...

  5. 自动化测试基础篇--Selenium简介

    摘自https://www.cnblogs.com/sanzangTst/p/7452636.html 一.软件开发的一般流程 二.什么叫软件测试? 软件测试(英语:Software Testing) ...

  6. Django之--通过MVC架构的html模板展示Hello World!

    上一篇:Django之--网页展示Hello World! 初步说明了如何使用Django来显示hello world,本文略微进阶下使用html模板来展示hello world~ 首先在mysite ...

  7. CentOS 7.0下解决ifconfig: command not found的方法

    在CentOS7.0中输入ifconfig命令会遇到-bash: ifconfig: command not found. 在CentOS最小安装时是没有附带ifconfig,我们进入sbin目录下可 ...

  8. UnicodeEncodeError: 'ascii' codec can't encode characters in position

    UnicodeEncodeError: 'ascii' codec can't encode characters in position python运行时出现这个错误,解决方法如下: 加入如下语句 ...

  9. Linux-centos7超过2TB使用parted命令分区

    介绍说明: parted的操作都是实时的,也就是说你执行了一个分区的命令,他就实实在在地分区了, 而不是像fdisk那样,需要执行w命令写入所做的修改, 所以进行parted的测试千万注意不能在生产环 ...

  10. SpringCloud之初识Zuul(网关)---动态路由,权限验证

    通过前面的学习,使用Spring Cloud实现微服务的架构基本成型,大致是这样的: 我们使用Spring Cloud Netflix中的Eureka实现了服务注册中心以及服务注册与发现:而服务间通过 ...