CSS3 target 和 focus 伪类 (附演示)_html-js-css

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

　　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 伪类演示 - </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 - </Title><style type="text/CSS">body {padding: 40px;margin: 0;Font: 12px Arial,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/

总结

以上是内存溢出为你收集整理的CSS3 target 和 focus 伪类 (附演示)全部内容，希望文章能够帮你解决CSS3 target 和 focus 伪类 (附演示)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1021265.html