1. 链接伪类:

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style type="text/css">
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
</style>
</head>
<body> <h2>链接伪类</h2>
<a href="#">伪类链接</a> </body>
</html>

a:link 未访问

a:hover: 鼠标放上.

2.CSS2 - :first-child 伪类

例如:  p:first-child  这个表示的是  p 的父元素 的 第一个子元素是 p  ; 如果存在就应用样式, 如果不存在就没有样式.

p:first-child 匹配到:

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style type="text/css">
p:first-child {
color: red;
}
</style>
</head>
<body> <h2>:first-child类</h2>
<div>
<p>这是p1</p>
<div>这是div</div>
<p>这是p2</p> </div> </body>
</html>

p:first-child 没有匹配到:

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style type="text/css">
p:first-child {
color: red;
}
</style>
</head>
<body> <h2>:first-child类</h2>
<div>
<div>这是div</div>
<p>这是p1</p>
<p>这是p2</p> </div> </body>
</html>

这是因为  p 元素的 父元素 div 的第一个子元素 是  子 div , 不是 p 元素, 没有匹配到.

-----------------------

参考资料:

  1. CSS 伪类 (Pseudo-classes)
  2. CSS 伪类-列表 (Pseudo-classes)
  3. CSS 伪类 和伪元素的区别 (Pseudo-classes)
  4. 总结伪类与伪元素

css 伪类: 1)a:link , a:visited, a:hover, a:active 2):first-child的更多相关文章

  1. CSS链接的样式a:link,a:visited,a:hover,a:active

    a :link(未被访问)a:hover(鼠标悬停)a:visited(访问过:真正到达那个页面)a:active(鼠标点击与释放之间.对无href属性的a对象无作用) 这几个元素,定义CSS时候的顺 ...

  2. css中链接的4个状态 link、visited 、hover、active 顺序与设置

    link       未点时链接色visited  已点过的链接色hover   光标放入链接上的色active   点击时的样式 顺序一定要按link.visited.hover.active来设置 ...

  3. a:link,a:visited,a:hover,a:active

    1:解释 link:连接平常的状态 visited:连接被访问过之后 hover:鼠标放到连接上的时候 active:连接被按下的时候      详细的: :hover版本:CSS1/CSS2 兼容性 ...

  4. a标签的link、visited、hover、active的顺序

    a标签的link.visited.hover.active是有一定顺序的,以下是我一直在用的一个顺序,能正确显示四个颜色,我也不知道有没有其他的顺序能正确显示,如果你没办法判断哪个是对的,那就先用这个 ...

  5. 如何消除移动端a标签点击时的蓝色底色以及a标签link、visited、hover、active的顺序

    1.消除a标签移动端点击时的蓝色底色 -webkit-tap-highlight-color:transparent 2.link.visited.hover.active的顺序 a:link{tex ...

  6. a:link a:visited a:hover a:active四种伪类选择器的区别

    a:link选择网页中所有没有被visited的a标签,就是没有鼠标悬停hover或者点击click(a链接没有被访问时的样式) a:visited选择网页中所有已经被click的a链接,用来告诉用户 ...

  7. 超链接标签的CSS伪类link,visited,hover,active

    CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有: ...

  8. CSS伪类和伪元素

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

  9. CSS 伪类

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

随机推荐

  1. Fiddler抓取https数据包

    Wireshark和Fiddler的优缺点: ①Wireshark是一种在网络层上工作的抓包工具,不仅自带大量的协议分析器,而且可以通过编写Wireshark插件来识别自定义的协议.虽然Wiresha ...

  2. 数据库SQLserver(课本)

    一.SQL server的部署 1.数据库的基本概念 数据库通常是一个由行和列组成的二维表 数据表中的行通常叫做记录或元祖 数据表中的列通常叫做字段或属性 2.主键和外键 主键:定义主键可以保证数据的 ...

  3. Northcott Game HDU - 1730

    Tom和Jerry正在玩一种Northcott游戏,可是Tom老是输,因此他怀疑这个游戏是不是有某种必胜策略,郁闷的Tom现在向你求救了,你能帮帮他么? 游戏规则是这样的: 如图所示,游戏在一个n行m ...

  4. 整体二分求动态区间第k大

    比树状数组套主席树不知道高到哪里去了,solve(l,r,L,R)就是对于L,R的操作区间的答案都在l,r区间里,然后递归下去 复杂度O(nlognlogn),每个操作会执行logn次就是o(nlog ...

  5. C#操作MSMQ

    C#操作MSMQ using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...

  6. log4j的一些参数说明

    参数 说明 例子 %c 列出logger名字空间的全称,如果加上{<层数>}表示列出从最内层算起的指定层数的名字空间 log4j配置文件参数举例 输出显示媒介 假设当前logger名字空间 ...

  7. 2.Liunx 系统设置

    1.基本命令:clear 2.环境变量: alias .export 大纲 系统管理命令 1.用户管理:adduser .passwd. userdel 2.用户组管理:groupadd.groupd ...

  8. RocketMQ消息存储

    转载:RocketMQ源码学习--消息存储篇 消息中间件—RocketMQ消息存储(一) RocketMQ高性能之底层存储设计 存储架构 RMQ存储架构 上图即为RocketMQ的消息存储整体架构,R ...

  9. c++ 软件版本比较函数

    // 版本号拆分为数组 void splitToInt(string str , vector<int> *v1, char delim ){ // 拆分 string strTmp; s ...

  10. Redis分布式锁实例

    maven依赖 <dependency> <groupId>redis.clients</groupId> <artifactId>jedis</ ...