伪类选择器

来源：互联网发布：wcf 数据库编辑：程序博客网时间：2024/05/29 08:01

伪类选择器：伪类选择器就是对元素处于某种状态下进行样式化的。

伪类作用:active将样式添加到被激活的元素:focus将样式添加到被选中的元素:hover当鼠标悬浮在元素上方时，向元素添加样式:link将特殊的样式添加到未被访问过的链接:visited将特殊的样式添加到被访问过的链接:first-child将特殊的样式添加到元素的第一个子元素:lang允许创作者来定义指定的元素中使用的语言

注意事项：

1.在 CSS 定义中，标签:hover 必须被置于标签:link 和标签:visited 之后，才是有效的。

2.CSS 定义中，标签:active 必须被置于标签:hover 之后，才是有效的。

3.伪类名称对大小写不敏感

Demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伪类选择器</title>
<!--
伪类选择器：伪类选择器就是对元素处于某种状态下进行样式化的。
  伪类作用
:active将样式添加到被激活的元素
:focus 将样式添加到被选中的元素 
:hover 当鼠标悬浮在元素上方时，向元素添加样式 
:link 将特殊的样式添加到未被访问过的链接 
:visited 将特殊的样式添加到被访问过的链接 
:first-child 将特殊的样式添加到元素的第一个子元素  
:lang 允许创作者来定义指定的元素中使用的语言 
注意事项： 
1.在 CSS 定义中，标签:hover 必须被置于 标签:link 和 标签:visited 之后，才是有效的。
2.CSS 定义中，标签:active 必须被置于 标签:hover 之后，才是有效的。
3.伪类名称对大小写不敏感。
-->
<style type="text/css">
a:link {color: #FF0000}/* 未访问的链接 */
a:visited {color: #00FF00}/* 已访问的链接 */
a:hover {color: #FF00FF}/* 鼠标移动到链接上 */
a:active {color: #0000FF}/* 选定的链接 */
table{
background-color:#CCFFFF;
border-collapse:collapse;/*border-collapse 设置是否把表格边框合并为单一的边框。 */
}
tr:hover{
background-color:#3399FF;
}
tr:active{
background-color:#FF0000;
}
td:hover{
background-color:#00FF66;
}
</style>
</head>
<body>
<a href="#"><center>链接_伪类选择器</center></a><hr/>
<table width="500px" height="400" border="1px" align="center">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>木丁西</td>
<td>23</td>
<td>男</td>
</tr>
<tr>
<td>刘先森</td>
<td>13</td>
<td>男</td>
</tr>
<tr>
<td>木先生</td>
<td>70</td>
<td>男</td>
</tr>
<tr>
<td>张靓颖</td>
<td>26</td>
<td>女</td>
</tr>
</table>
</body>
</html>

效果如下：

0 0