標籤：style http color 使用 os strong io 2014
在前面的章節中，我們瞭解了，可以使用行內樣式，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
個人申明：所分享博文，絕對原創，并力爭每一個知識點都通過實戰示範來進行驗證。
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
