您當前位置：首頁 > web前端 > htmlcss > CSS3 target 和 focus 偽類 (附演示)

CSS3 target 和 focus 偽類 (附演示)

來源：程序員人生發布時間：2014-03-29 03:09:31 閱讀次數：3162次

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

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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

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

下一篇 使用VS2005的MSSQL 2005 EXPRESS

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

CSS3 target 和 focus 偽類 (附演示)