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. coTurn 使用测试方法

    做个记录 1.从"../examples/etc/" 目录拷贝turnserver.conf文件到"/usr/local/etc/"目录 2.修改配置文件 主要 ...

  2. JAVA多线程的问题以及处理（二）【转】

    使用互斥解决多线程问题是一种简单有效的解决办法,但是由于该方法比较简单,所以只能解决一些基本的问题,对于复杂的问题就无法解决了. 解 决多线程问题的另外一种思路是同步.同步是另外一种解决问题的思路,结 ...

  3. c 指针函数 vs 函数指针

    指针函数,函数指针 #include <stdio.h> int max(int a, int b){ return a > b ? a : b; } //函数指针,2个int参数, ...

  4. 用beamoff给VMware的Mac OS X 10.10.x加速

    前言 今天刚在VMware里装了个Yosemite,然后测试了下看电影,真j8卡,试了下在vm里打开3d加速,然并卵,直接显示不能打开3d加速,然后找了下发现有个vga的什么软件,是vmware里的显 ...

  5. 【合集】Hadoop 合集

    0. 说明 Hadoop 随笔的目录 1. HDFS 主要内容: [HDFS_1] HDFS 的概念和特性 [HDFS_2] HDFS 的 Shell 操作 [HDFS_3] HDFS 工作机制 [H ...

  6. 基于SurfaceView的可拖动视频控件

    视频播放控件(一) 可拖动,变换SurfaceView public class DragSurfaceView extends SurfaceView implements View.OnTouch ...

  7. AI学习--机器学习概述

    学习框架 01-人工智能概述 机器学习.人工智能与深度学习的关系 达特茅斯会议-人工智能的起点 机器学习是人工智能的一个实现途径深度学习是机器学习的一个方法发展而来(人工神经网络) 从图上可以看出,人 ...

  8. php5.4新功能Traits

    php5.4新功能Traits介绍 1. traits Traits是在5.4中新增的一个用于实现代码重用的方法. php是一种单一继承的语言,我们无法像java一样在一个class中extends多 ...

  9. 复制 cmd 窗口文本三步曲:

    1:右键菜单点"标记": 2:按住左键选文字: 3:选完右键点一下!  (关键一步,只需点一下就好!!) so 待选文字就跑到剪切板上了

  10. MacBook Pro维修过程

    上个月买了2016款无touchbar的MacBook Pro,这款的键盘跟15年版本的很不一样. 在用了三周左右,就发现有个键按着不灵活了,像是进了水一样,黏住感觉,必须要大力按才会出来.思来想去, ...