
<a>标签可定义锚。锚 (anchor) 有两种用法:
通过使用 href 属性,创建指向另外一个文档的链接(或超链接)
通过使用 name 或 id 属性,创建一个文档内部的书签(也就是说,可以创建指向文档片段的链接)
<a>元素最重要的属性是 href 属性,它指定链接的目标。
伪类选择器包括:
:link表示未访问的链接
:visited表示已访问的链接
:hover表示鼠标悬停的链接
:active表示选定的链接
在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
伪类名称对大小写不敏感。
:first-of-typep:first-of-type选择属于其父元素的首个元素的每个
元素。 \x0d\x0a:last-of-typep:last-of-type选择属于其父元素的最后
元素的每个
元素。\x0d\x0a:only-of-typep:only-of-type选择属于其父元素唯一的
元素的每个
元素。\x0d\x0a:only-childp:only-child选择属于其父元素的唯一子元素的每个
元素。\x0d\x0a:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个
元素。 \x0d\x0a:nth-last-child(n)p:nth-last-child(2)同上,从最后一个子元素开始计数。\x0d\x0a:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个
元素的每个
元素。 \x0d\x0a:nth-last-of-type(n)p:nth-last-of-type(2)同上,但是从最后一个子元素开始计数。 \x0d\x0a:last-childp:last-child选择属于其父元素最后一个子元素每个
元素。 \x0d\x0a:root:root选择文档的根元素。 \x0d\x0a:emptyp:empty选择没有子元素的每个
元素(包括文本节点)。 \x0d\x0a:target#news:target选择当前活动的 #news 元素。\x0d\x0a:enabledinput:enabled选择每个启用的 元素。 \x0d\x0a:disabledinput:disabled选择每个禁用的 元素 \x0d\x0a:checkedinput:checked选择每个被选中的 元素。 \x0d\x0a:not(selector):not(p)选择非
元素的每个元素。\x0d\x0a::selection::selection选择被用户选取的元素部分。
<style type="text/css">/*
伪类选择器:伪类选择器就是对元素处于某种状态下进行样式的。
注意:
1. a:hover 必须被置于 a:link 和 a:visited 之后
2. a:active 必须被置于 a:hover 之后
*/
a:link{color:#F00} /* 没有被点击过---红色 */
a:visited{color:#0F0} /* 已经被访问过的样式---绿色 */
a:hover{color:#00F} /* 鼠标经过的状态---蓝 */
a:active{color:#FF0}
</style>
应用 代码:
<!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/htmlcharset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css" >
table{
background-color:#CCC
border-collapse:collapse
border:3px
}
tr:hover{
background-color:#06F
}
</style>
<body>
<table border="1px" width="400px" height="300px" align="center" >
<tr>
<th>姓名</th>
<th>成绩</th>
<th>人品</th>
</tr>
<tr>
<td>张三</td>
<td>98</td>
<td>差</td>
</tr>
<tr>
<td>李四</td>
<td>50</td>
<td>极好</td>
</tr>
<tr>
<td>综合测评</td>
<td colspan="2">不错</td>
</tr>
</table>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)