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. Django 配置MySQL数据库

    在settings.py中配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', # 数据库引擎 'NAME': 'my ...

  2. tkinter进阶版——ttk

    很长的一段时间里,我都是用tkinter进行GUI设计的,还写过一篇<tkinter模块常用参数>. 但后来慢慢地觉得,这个tkinter真的是有点丑啊. 于是,找到了现在的ttk. tt ...

  3. 编写寄宿于windows服务的WCF服务

    由于业务中有些任务需要在后台静默长期运行,或者有些服务队响应的要求比较苛刻,这样的WCF服务就不适合寄宿于IIS中.IIS每隔一段时间w3wp进程会闲置超时,造成服务的运行停止,因此这种耗时或者定时任 ...

  4. Android Studio连接天天模拟器

    方法:安装两者后,打开天天模拟器的adb.exe所在目录,我的是C:\Users\ Android\sdk\platform-tools,在打开的文件夹下使用“shift+鼠标右键”打开cmd终端. ...

  5. c/c++叉树的创建与遍历（非递归遍历左右中，不破坏树结构）

    二叉树的创建与遍历(非递归遍历左右中,不破坏树结构) 创建 二叉树的递归3种遍历方式: 1,先中心,再左树,再右树 2,先左树,再中心,再右树 3,先左树,再右树,再中心 二叉树的非递归4种遍历方式: ...

  6. 在Lua中提示UnityEngine.dll的方法

    我的环境 安装最新的 EmmyLua-1.2.1及以上版本 IDEA 2017.1.2 及以上版本 关于EmmlyLua的介绍可查看我之前的文章:Lua代码提示和方法跳转 说明:本文方法摘自 Emmy ...

  7. HTTP与TCP的区别和联系

    工作原理(转载): https://www.cnblogs.com/zimohul/p/6506406.html 相信不少初学手机联网开发的朋友都想知道Http与Socket连接究竟有什么区别,希望通 ...

  8. AOP的底层实现：JDK动态代理与Cglib动态代理

    转载自 https://www.cnblogs.com/ltfxy/p/9872870.html SpringAOP底层的实现原理: JDK动态代理:只能对实现了接口的类产生代理.(实现接口默认JDK ...

  9. 【Teradata 】TD最大列数

    1.一个表最大列数限制是多少? DB2,表最大列数1012,视图最大列数5000:一行最大长度32677Byte Teradata 表最大列数和视图最大列数2048,:16版本前,一行最大长度为64k ...

  10. 获取Spring容器Bean对象工具类

    在开发中,总是能碰到用注解注入不了Spring容器里面bean对象的问题.为了解决这个问题,我们需要一个工具类来直接获取Spring容器中的bean.因此就写了这个工具类,在此记录一下,方便后续查阅. ...