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. Weblogic java生成wlfullclient.jar

    进入weblogic的server\lib目录 cd G:\Oracle\Middleware\wlserver_10.3\server\lib 运行 java -jar G:\Oracle\Midd ...

  2. [20190306]共享服务模式与SDU.txt

    [20190306]共享服务模式与SDU.txt --//一些文档提到共享服务模式,服务端SDU=65535,测试验证看看.--//链接:https://blogs.sap.com/2013/02/0 ...

  3. C#-结构体（十）

    结构体概念 在C#中,结构体是值类型,一般适用于表示类似Point.Rectangle.Color的对象 值类型能够降低对堆的管理.使用.降低垃圾回收,表现出更好的性能.可是值类型也有不好的一面.会涉 ...

  4. web前端（9）—— CSS属性

    属性 终于到css属性,前面就零零散散的用了什么color,font-size之类,本篇博文就专项的介绍它了 字体属性 font-family 此属性是设置字体样式的,比如微软雅黑,方正书体,华文宋体 ...

  5. Json.net日期格式化设置

    Json.net默认的时间格式化后带T,不符合一般的业务要求,重新设置JSON.NET的默认日期格式化方式,代码如下: /// <summary> /// Json.net默认转换设置 / ...

  6. 对Can We Make Operating Systems Reliable and Secure 的翻译

    摘要:微内核-相对于大内核(monolithic kernels)来说,由于它的 lower performance,长期以来被认为是不可接受的.而现在,由于它潜 在的高可靠性(higher reli ...

  7. XSS 漏洞原理及防御方法

    XSS跨站脚本攻击:两种情况.一种通过外部输入然后直接在浏览器端触发,即反射型XSS:还有一种则是先把利用代码保存在数据库或文件中,当web程序读取利用代码并输出在页面上时触发漏洞,即存储型XSS.D ...

  8. 18年10月份最新免费申请微软OneDrive5TB云盘超详细教程！（已亲测！）

    本人已于今天10月23日亲测,成功获取微软OneDrive5T云盘! 第一步:.打开申请链接学生版:https://signup.microsoft.com/signup?sku=student教师版 ...

  9. Spring Data JPA 简单查询--方法定义规则

    一.常用规则速查 1  And 并且2  Or  或3  Is,Equals 等于4  Between  两者之间5  LessThan 小于6  LessThanEqual   小于等于7  Gre ...

  10. 使用Razor Generator构建模块化ASP.NET MVC应用程序

    在构建Web应用程序的时候,我们很难做到模块化的开发,这是因为Web应用程序不仅仅包含编译的C#代码,还包含了js.css和aspx等资源. 在ASP.NET MVC中,我们发布应用程序的时候,还会包 ...