html标签<a>作用是什么?在定义css时,它的伪选择器包括哪几种?

html标签<a>作用是什么?在定义css时,它的伪选择器包括哪几种?,第1张

<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>


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zaji/7502094.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-06
下一篇2023-04-06

发表评论

登录后才能评论

评论列表(0条)

    保存