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>
原文地址：https://www.cnblogs.com/zoulixiang/p/9987899.html
时间： 2024-11-29 03:34:33