CSS3 target 和 focus 伪类 (附演示)

发布时间：2018-09-03 21:34:52 所属栏目：经验来源：站长网

导读：CSS3里的 target 和 focus 伪类都是针对特定元素的选择器，可以用来突出元素的位置。 target 伪类 target 伪类用于改变锚链接URL所指向的ID的样式。例如你要让页面页面里任何通过锚链接访问的元素字体都变成红色，可以这样写 *:target { color : red }。

　　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.veryhuo.com/' target='_blank'>http://www.veryhuo.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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

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

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!