|
屬性選擇符
“屬性選擇符”可以根據某個屬性是否存在，或者屬性的值來尋找元素。巧妙地利用“屬性選擇符”,將可以輕松的實現很多實用而且強大的效果。
很多“以用戶為核心”的擁護者，一直強烈的去掉<a>標簽的target屬性，其一個很重要的原因就是“沒有經過用戶的同意，就打開了新的瀏覽器頁面，是一種不尊重用戶的表現�！逼鋵崳覀�人感覺，大可不必如此興師動眾。因為就算是去掉了這個屬性，還是無法尊重用戶，因為如果有的用戶，就是想在新的頁面打開這個鏈接呢？（假使，他不知道使用shift點擊鏈接可以達到目的，而且他也沒有安裝類似于“拖拽打開新頁面”的瀏覽器或者插件）
其實，使用“屬性選擇符”，可以比較有效的解決上面的問題。就是利用“屬性選擇符”，將會在新窗口打開的超鏈接，明確的標識出來，由用戶決定是否去點擊超鏈接。（很多外國的網站已經在使用這種方式，而且已經形成了一種共識：在一個網站各頁面之間的跳轉鏈接，不在新窗口打開。而“會跳轉到外部網站的鏈接”將在新的頁面窗口打開。“會跳轉到外部網站的鏈接”的標識圖片也已經形成了共識，就是這個圖標：“ ”）下面的示例中，便是一種供參考的解決方案：
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!,web標準,楊正祎,博客園,實例代碼" />
<meta name="Description" content="這是一個簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例頁面</title>
<style type="text/css">
a[target="_blank"]{
padding-right:16px;
background:url('http://images.cnblogs.com/cnblogs_com/justinyoung/common
/outLink.gif') no-repeat right;
}
</style>
</head>
<body>
<p>
<a href="#" title="我不會跳轉到其他網站，不會再新窗口打開">我不會跳轉到其他網站，不會再新窗口打開</a>
</p>
<p>
<a href="</p>
</body>
</html>
下面是IE7的顯示效果截圖：
圖：“屬性選擇符”效果示意圖，注意第二個超鏈接后的圖標
更強大的是：“屬性選擇符”也可以判斷一些自己自定義的屬性，這對于一些第三方插件開發(fā)的程序員，將是一個極大的方便。例如，對于開發(fā)網頁“網頁翻譯”的朋友，可以將需要翻譯的關鍵字用<span>包起來，然后對這個span設置一個自己的屬性。例如中文到英文的翻譯，就加個"lang='c2e'"，如果是中文翻譯到日文，就加個"lang='c2j'"。然后通過“屬性選擇符”，將兩種情況設置不同的樣式，從而區(qū)分開來。
出處：
責任編輯：bluehearts
上一頁 更豐富的CSS選擇符 [2] 下一頁 更豐富的CSS選擇符 [4]
◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 更豐富的CSS選擇符 [3]
