首頁 > 開發者 > JavaScript
CSS3屬性選取器詳解 及 雙色球實戰開發，css3選取器
在前面的章節中，我們瞭解了，可以使用行內樣式，ID選取器，類別選取器，以及標籤選取器來給一個元素應用樣式。
如果我們想給定義了那些都定義了某一個屬性的元素應用樣式，這個時候我們該怎麼做呢？
這一節中，我將使用 雙色球案例 和 文件類型提示表徵圖案例 來引入和應用屬性選取器。
雙色球案例：
大家都知道，雙色球共有7個球，6個紅球，1個藍球。首先我們先在頁面上面定義7個span標籤：
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <link rel=”stylesheet” href=”styles_20140705.css”> <title>CSS3 屬性選取器</title> </head> <body> <div class="container"> <!-- 實戰互連網 http://www.itdriver.cn --> </body> </html> |
此時運行頁面，我們發現所有數字都連在一起：
接著我們在外部樣式表中，通過標籤選取器來調整數字球之間的距離:
.balls span{ margin-left:0.8em; } |
但是我們知道，每個球都有一個圓背景，這個怎麼實現呢，在CSS2中，我們只能通過背景圖片來做，而到了CSS3，我們只需要設定標籤的角的半徑(radius)，即可實現。如果大家看不懂下面的代碼，沒關係，後面會有一片專門的文章來講解。現在大家只要記住下面的CSS3樣式代碼是用來設定圓角的就OK了。
我們把上面的樣式代碼做一下改良(紅色字型為新增加的樣式):
.balls span{ margin-left:0.8em; /*設定數字球之間的距離為0.8em*/ display:block; /*將數字球span設為塊，便於調整寬和高*/ float:left; /*使數字球向左浮動，連在一行顯示*/ width:1.4em; /*設定數字球span的寬高*/ height:1.4em; border:1px solid red;/*設定數字球邊框為紅色，這個是為了便於查看設定的樣式是否已經生效*/ -webkit-border-radius:0.7em;/*設定span圓角半徑，如果半徑為總長度一半，則就形成了圓*/ -moz-border-radius:0.7em; border-radius:0.7em; text-align:center; /*使數字球中的字水平置中顯示*/ line-height:1.4em; /*使數字球中的字垂直置中顯示*/ } |
此時運行Demo，球體的雛形已經出來了:
有人會問，你樣式怎麼都寫在同一個span標籤選取器裡了，怎麼還沒講到屬性選取器呢？
別急，上面這些樣式都是所有球體共有的屬性樣式，故都寫同一個標籤裡了。我們知道雙色球，前六個為紅球，最後一個為藍球，那這個到底怎麼處理呢？
我們先瀏覽一下知識點，屬性選取器是從CSS2開始引入進來的，下面是CSS2中定義的屬性選取器:
| E[attr] | 選擇匹配定義了attr屬性的E類型元素。注意，E類型可以省略，直接寫[attr]，這就意味著匹配所有定義了attr屬性的元素。 |
| E[attr="value"] | 選擇匹配那些attr屬性值設為value的E類型元素。注意，E類型可以省略，直接寫[attr="value"]，這就意味著匹配所有attr=”value”的元素。 |
| E[attr~="value"] | 選擇匹配那些attr屬性值是列表形式的，且各個值是以空格分開的，且有一個值為value的所有E類型元素。注意E可以省略。 |
| E[attr|="value"] | 選擇匹配那些attr屬性值是value或是以value- 開頭的E類型元素。注意，E類型可以省略。 |
| E[attr^="value"] | 選擇匹配那些attr屬性值是以value開頭的E類型元素。注意，E標籤選擇符可以省略。 |
| E[attr$="value"] | 選擇匹配那些attr屬性值是以value為尾碼的E類型元素。注意，E標籤選擇符可以省略。 |
| E[attr*="value"] | 選擇匹配那些attr屬性值包含value的E類型元素。注意E標籤選擇符可以省略。 |
其實從上表格中，我們可以看出，屬性選取器其實就是給標籤選取器加上屬性限制，它就是標籤選取器的進一步細化。
好了，當我們瞭解了屬性選取器的基本知識之後，就可以給雙色球加背景顏色了:
.balls span{ margin-left:0.8em; /*設定數字球之間的距離為0.8em*/ display:block; /*將數字球span設為塊，便於調整寬和高*/ float:left; /*使數字球向左浮動，連在一行顯示*/ width:1.4em; /*設定數字球span的寬高*/ height:1.4em; border:1px solid red;/*設定數字球邊框為紅色，這個是為了便於查看設定的樣式是否已經生效*/ -webkit-border-radius:0.7em;/*設定span圓角半徑，如果半徑為總長度一半，則就形成了圓*/ -moz-border-radius:0.7em; border-radius:0.7em; text-align:center; /*使數字球中的字水平置中顯示*/ line-height:1.4em; /*使數字球中的字垂直置中顯示*/ color:#FFFFFF; /*設定span中字型顏色*/ box-shadow:0.15em 0.15em #999; /*給ball應用陰影製作效果，增加立體感*/ }
/*給所有的ball應用樣式*/ .balls span[title]{ /*給設定了title屬性的span 應用樣式*/ background-color:#FF0000; } /*給class以blueball為結尾的span元素應用樣式*/ .balls span[class$="blueball"]{ background-color:#0033CC; } |
此時運行我們的Demo，雙色球就出來了。
細心的網友可能已經發現，在第一個球中，我們同樣設定了blueball樣式，但是它依然是紅色背景， 這就證明了E[attr$="value"]確實是給那些attr屬性值以value為結尾的E元素添加樣式的。
接下來，我們繼續講解文件類型提示表徵圖案例：
首先建立頁面:
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <link rel=”stylesheet” href=”styles_2014070502.css”> <title>文件類型提示表徵圖</title> </head> <body> <a href="http://www.itdriver.cn">實戰互連網</a> <div> <dl> <dt>文檔推薦列表</dt> <dd> <ul> <li><a href=”http://www.baidu.com/doc/css3.pdf”><span></span>CSS3案例開發</a></li> <li><a href=”http://www.baidu.com/doc/css3.ppt”><span></span>CSS3教程分享計劃</a></li> <li><a href=”http://www.baidu.com/doc/css3.doc”><span></span>CSS3相關博文</a></li> <li><a href=”http://www.itdriver.cn”><span></span>作者個人首頁</a></li> </ul> </dd> </dl> </div> </body> </html> |
運行頁面Demo，由於暫時未加任何樣式，效果如所示:
現在我們在外部樣式表中應用樣式:
.prefer_docs dd{ /*清除dd 到 dl 邊框的距離*/ margin-left:0px; } .prefer_docs ul{/*重新設定ul樣式*/ list-style-type:none; padding-left:0px; margin-left:0px; } .prefer_docs li{/*調整推薦文檔的上下距離*/ margin-bottom:2px; } .prefer_docs a{/*去除文檔超連結底線*/ text-decoration:none; } .prefer_docs a:hover{/*給超連結應用滑鼠滑過時的樣式*/ color:red; text-decoration:underline; } .prefer_docs a span{ /*定義文件類型表徵圖顯示地區大小*/ background: no-repeat; display:block; height:16px; width:16px; float:left; margin-right:2px; } .prefer_docs a span{ /*匯入文件類型背景圖片*/ background-image:url(pkg_icon.png); } .prefer_docs a[href$="ppt"] span{/*所有以ppt為結尾的，應用ppt表徵圖*/ background-position:-856px -36px; } .prefer_docs a[href*="pdf"] span{/*給連結中包含pdf文字的連結，應用pdf表徵圖*/ background-position:-625px -36px; } .prefer_docs a[class|="doc"] span{/*給class以doc或者doc- 開頭的連結，應用doc表徵圖*/ background-position:-877px -36px; } .prefer_docs a[class~="net"] span{/* class屬性中，含有net值的連結，應用Internet表徵圖 */ background-position:-520px -36px; } |
最後我們看一下運行效果：
以上即為利用屬性選取器，給文檔下載連結應用相應表徵圖的代碼示範。
當然，還有很多選取器，比如偽類別選取器，以及虛擬元素選取器，這裡不再詳述，在以後的執行個體中，如果用到，會做進一步的詳述。
歡迎大家加入互連網技術交流群：62329335
個人申明：所分享博文，絕對原創，并力爭每一個知識點都通過實戰示範來進行驗證。
《DIV+CSS網頁樣式與布局實錄》以目前流行的DIV+CSS標準布局方法和實戰技法為大綱，系統講解了CSS樣式的基礎理論和實際運用技術，並通過執行個體來講解層疊樣式表與層布局相結合製作網頁的方法。《DIV+CSS網頁樣式與布局實錄》共分14章內容，包括網頁製作的準備工作、HTML和XHTML基礎、CSS基礎、設定字型和文字樣式、設定超連結樣式、定義圖片和背景映像樣式、定義表格、表單和列表樣式、CSS網頁布局和定位、DIV+CSS網頁布局綜合演練、企業&公司類型和時尚娛樂類型網站的製作方法等，在執行個體的製作過程中介紹CSS樣式設計各方面知識的同時，還結合實際網頁製作中可能遇到的問題提供解決問題的思路、方法和技巧，使初學者也可以輕鬆掌握DIV+CSS布局的方法，製作出精美的網頁並搭建功能強大的網站。
圖書目錄
第1章 網頁製作的準備工作
1.1 認識幾個基本概念
1.1.1 網頁和網站
1.1.2 網頁類型
1.1.3 網頁構成
1.2 製作網站應該學習的知識
1.2.1 學習HTML語言
1.2.2 學習DIV構建網頁結構
1.2.3 學習CSS設定樣式
1.2.4 學JavaScript控制動態效果
1.3 提高自身的設計修養
1.3.1 瞭解網頁設計任務
1.3.2 瞭解網頁設計原則
1.3.3 瞭解網頁設計流程
1.3.4 瞭解網頁配色基本方法
1.4 熟悉網站開發的基本流程
1.5 準備上手的開發工具
1.5.1 安裝Dreamweaver
1.5.2 使用Dreamweaver
1.5.3 Dreamweaver工作方式
1.5.4 在Dreamweaver中編寫CSS樣式代碼
1.6 綜合訓練
1.6.1 實訓1：使用Dreamweaver定義一個本地網站
1.6.2 實訓2：使用Dreamweaver設計DIV結構.
1.6.3 實訓3：使用Dreamweaver設計網頁樣式
1.7 上機練習
第2章 HTML和XHTML基礎
2.1 認識HTML和XHTML
2.2 HTML基礎
2.2.1 HTML概述
2.2.2 HTML文檔結構
2.2.3 HTML基本文法
2.2.4 HTML標籤
2.2.5 HTML 屬性
2.3 ×HTML基礎
2.3.1.XHTML概述
2.3.2.XHTML文檔結構
2.3.3 XHTML基本文法
2.3.4 XHTML文件類型分類
2.3.5 XHTML文件類型詳解
2.3.6 XHTML名字空間
2.4 綜合訓練
2.4.1 實訓1：設計一個自我介紹簡單頁面
2.4.2 實訓2：解決網頁亂碼現象
2.4.3 實訓3：把HTML轉換為XHTML
2.5 上機練習
第3章 CSS基礎
3.1 CSS概述
3.1.1 什麼是CSS樣式
3.1.2 為什麼學習CSS
3.1.3 CSS的特點
3.2 CSS文法和用法
3.2.1 CSS基本結構
3.2.2 CSS基本用法
3.2.3 CSS樣式表
3.2.4 匯入外部樣式表
3.2.5 CSS注釋和版式
3.3 CSS屬性、屬性值和單位
3.3.1 CSS屬性
3.3.2 CSS單位
3.4 基本選取器
3.4.1 標籤選取器
3.4.2 類別選取器
3.4.3 ID選取器
3.4.4 通配選取器
3.5 複合選取器
3.5.1 子選取器
3.5.2 相鄰選取器
3.5.3 包含選取器
3.5.4 多層選取器嵌套
3.5.5 屬性選取器
3.5.6 偽選取器和虛擬元素選取器
3.5.7 選取器分組
3.6 CSS繼承性、層疊性和特殊性
3.6.1 CSS繼承性
......餘下全文>>
CSS3可以為屬性選取器設定偽類?
可以 為什麼你不寫個代碼測試下
--------------
<div>aaaaaaaaa</div>
<div title=value>bbbbb</div>
<div>aaaaaaaaa</div>
<div title=aa >ccccccc</div>
<div>aaaaaaaaa</div>
<style>
div[title^=val]{color:red}
div[title^=val]:hover{color:blue}
</style>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
