程序员人生网站导航

CSS3 target 和 focus 伪类 (附演示)

栏目：htmlcss时间：2014-03-29 03:09:31

　　CSS3里的 target 和 focus 伪类都是针对特定元素的选择器，可以用来突出元素的位置。

　　target 伪类

　　target 伪类用于改变锚链接URL所指向的ID的样式。例如你要让页面页面里任何通过锚链接访问的元素字体都变成红色，可以这样写 *:target { color : red }。

　　需要注意的是，在添加 target 样式之前你必须为该元素指定一个id。效果请下面的 DEMO。

<html><head><meta content="text/html; charset=GBK" http-equiv="Content-Type"><title>CSS3 target 伪类演示 - Liehuo.Net</title><style type="text/css">body {padding:40px;margin:0;font:12px Arial, Helvetica, sans-serif;background:#FFF;color:#000;}h1 {color:#900;letter-spacing: -1px}a {color:#00F;text-decoration: none}ul li {background:#9FF none repeat scroll 0 0;border-bottom:1px solid #FFFFFF;border-top:1px solid #DCE8F5;list-style-image:none;list-style-position:outside;list-style-type:none;padding:10px;color:#303a45;}ul li:nth-child(2n+1) {background:#6F9 none repeat scroll 0 0;border-top:1px solid #9FAAB7;}ul > li:target {background:#6CF none repeat scroll 0 0;border:3px solid #06F;padding:10px;}</style></head><body><h1>CSS3 target 伪类演示 By imbolo.com</h1><ul><li id="nth">项目一</li><li>项目二</li><li>项目三</li><li><a href="#nth">项目四（点击这里）</a></li><li>项目五</li><li>项目六</li><li>项目七</li></ul></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

　　focus 伪类

　　focus 伪类用于改变 input 和 textarea 等标签在获得焦点时的样式。当展示在用户面前的是一个项目繁多的表单时，使用 focus 伪类能使更易找到焦点。效果可以看下面的 DEMO。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta content="text/html; charset=GBK" http-equiv="Content-Type"><title>:focus Pseudo Class - Liehuo.Net</title><style type="text/css">body {padding: 40px;margin: 0;font: 12px Arial, Helvetica, sans-serif;background: #FFF;color:#000;}h1 {color:#900;letter-spacing: -1px;}a {color:#00F;text-decoration: none;}form {width:530px;}form div {clear: left;padding: 0 0 0.8em 0;}form label {float: left;font-weight:bold;width: 120px;text-align: right;padding-right: 10px;padding-top:10px;}textarea:focus, input:focus {background: #d5e0ee;border: 2px solid #E71F58;}form input, form textarea {background:#6CF none repeat scroll 0 0;border:1px solid #06F;padding:10px;width:400px;}form .button {border: 1px solid #333;background-color: #6CF;color: #000;padding: 0.1em;}form input[type="submit"] {background: #6CF;border: 1px solid #333;color: #000;float:right;width: 80px;padding: 10px;}</style></head><body><h1>CSS3 focus 伪类演示</h1><form method="post" action="" id="christmas-list"><div><label for="name">项目一</label><input type="text" name="name" id="name"/></div><div><label for="age">项目二</label><input type="text" name="age" id="age"/></div><div><label for="wishlist">项目三</label><textarea name="wishlist" id="wishlist" rows="10" cols="30"></textarea></div><div><input type="submit" name="Submit" id="Submit" value="Submit"></div></form></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

　　原文链接：http://blog.imbolo.com/css3-target-and-focus-pseudo-class/

------分隔线----------------------------

上一篇 如何在 Linux操作系统中收看直播

下一篇 使用VS2005的MSSQL 2005 EXPRESS

------分隔线----------------------------