首頁 > 開發者 > CSS

css2.1中的屬性選取器(css高手請繞道)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

早上看了司徒先生的js版屬性選取器(http://www.cnblogs.com/rubylouvre/archive/2009/10/27/1590102.html)，也激發了我深入瞭解css選取器的學習慾望， 整理於此以便日後備查

*：匹配任何元素。

例如: *{margin:0}

E：匹配任何E元素。

例如: div{color:red}

E F：匹配E的所有後代F元素。

E > F：匹配E的所有子F元素。這個選取器與上一個選取器的區別是：E F會匹配E標籤裡面嵌套的所有F標籤，而E > F只會匹配E標籤裡面嵌套的第一層F標籤。

說明：(Ie6以上版本支援)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>css屬性選取器</title><br /><style type="text/css"><br />*{color:black;}<br />.cls1 > div {color:red}<br />.cls2 div{color:green}<br /></style><br /></head><br /><body><br /><div class="cls1"><br /><div class="sub">sub div1<br /><div>aaa</div><br /></div><br /><div class="sub">sub div2<br /><div>bbb</div><br /></div><br /></div><br /><hr /><br /><div class="cls2"><br /><div class="sub">sub div1<br /><div>aaa</div><br /></div><br /><div class="sub">sub div2<br /><div>bbb</div><br /></div><br /></div><br /></body><br /></html><br />

運行代碼

E:first-child：匹配第一個E元素。

說明：IE6以上版本支援

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>E:first-child</title><br /><style type="text/css"><br />.cls1 div:first-child{color:red}<br /></style><br /></head><br /><body><br /><div class="cls1"><br /><div >我是紅色的</div><br /><div >我是黑色的</div><br /></div><br /></body><br /></html><br />

運行代碼

E:link，E:visited：分別匹配還沒瀏覽過的超連結和已經瀏覽過的超連結。

E:active，E:hover，E:focus：匹配各種使用者動作下的E元素。

說明:IE6以上的版本，允許任何元素都可使用:hover等偽類

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>css屬性選取器</title><br /><style type="text/css"><br />.cls1:first-child{color:red}<br />.cls1:focus{border:solid 1px #f00} /*-ie8才開始支援-*/<br />.cls1:hover{background:#ff9} /*-ie7才開始支援-*/<br /></style><br /></head><br /><body><br /><input type="text" class="cls1"></input><br /><input type="text" class="cls1"></input><br /><input type="text" class="cls1"></input><br /></body><br /></html><br />

運行代碼

E + F：匹配與E鄰接的下一個F元素。

說明：(可惡的IE不支援-不管是IE的哪個版本都一樣) 該選取器還有一個非標準的寫法 E ~ F 效果跟E + F一樣(但是~的這種寫法，IE7,IE8能識別)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>css屬性選取器</title><br /><style type="text/css"><br />.cls1 + .cls2{border:solid 1px #f00}<br /></style><br /></head><br /><body><br /><input type="text" class="cls1"></input><br /><input type="text" class="cls2"></input><br /><input type="text" class="cls1"></input><br /><input type="text" class="cls2"></input><br /></body><br /></html><br />

運行代碼

E[foo]：匹配設定了foo屬性（不管是什麼值）的E元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>css屬性選取器</title><br /><style type="text/css"><br />.cls1[email]{border:solid 1px #f00} /*-ie7才開始支援-*/<br /></style><br /></head><br /><body><br /><input type="text" class="cls1" email="yjmyzz@126.com"></input><br /><input type="text" class="cls1"></input><br /></body><br /></html><br />

運行代碼

E[foo="warning"]：匹配任何foo屬性為"warning"的E元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>css屬性選取器</title><br /><style type="text/css"><br />input[class='cls1']{border:solid 1px #f00} /*--ie7才開始支援(該屬性區分大小寫)--*/<br /></style><br /></head><br /><body><br /><input type="text" class="cls1" value='cls1'></input><br /><input type="text" class="Cls1" value='Cls1'></input><br /><input type="text" class="cls2" value='cls2'></input><br /></body><br /></html><br />

運行代碼

E[foo~="warning"]：匹配任何foo屬性以空白作為分隔，其中一個值是"warning"的E元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>css屬性選取器</title><br /><style type="text/css"><br />input[class~='cls2']{border:solid 1px #f00} /*--ie7才開始支援(該屬性區分大小寫)--*/<br /></style><br /></head><br /><body><br /><input type="text" class="cls1 cls2" value='cls1 cls2'></input><br /><input type="text" class="Cls1" value='Cls1'></input><br /><input type="text" class="cls2" value='cls2'></input><br /></body><br /></html><br />

運行代碼

E[lang!="en"]：匹配任何lang屬性值以"-"作為分隔字元，而且第一個精確等於"en"的E元素（也匹配lang屬性只有屬性值en的元素）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>css屬性選取器</title><br /><style type="text/css"><br />input[class|='cls1']{border:solid 1px #f00} /*--ie7才開始支援(該屬性區分大小寫)--*/<br /></style><br /></head><br /><body><br /><input type="text" class="cls1-cls2-cls3" value='cls1-cls2-cls3'></input><br /><input type="text" class="cls2-cls1" value='cls2-cls1'></input><br /><input type="text" class="cls1" value='cls1'></input><br /></body><br /></html><br />

運行代碼
E[foo*="abc"]:匹配任何有foo屬性值，且屬性值包含"abc"的E元素。
說明:雖然w3c組織未把該選取器列在標準之中，但是5大瀏覽器都支援(除IE6及IE6以下版本)，已經是事實標準

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>css屬性選取器</title><br /><style type="text/css"><br />input[class*='cls1']{border:solid 1px #f00} /*--ie7才開始支援(該屬性區分大小寫)--*/<br /></style><br /></head><br /><body><br /><input type="text" class="cls1-cls2-cls3" value='cls1-cls2-cls3'></input><br /><input type="text" class="cls2cls1" value='cls2cls1'></input><br /><input type="text" class="Cls1" value='Cls1'></input><br /></body><br /></html><br />

運行代碼 

E.warning：相當於E[class~="warning"]，匹配任何使用了warning樣式類的E元素。

E#myid：相當於E[id='myid']，匹配任何id為myid的E元素。

E:before和E:after ,這是二個很少用的偽類，用於在E元素前後顯示一些內容(IE8才開始支援)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>after,before偽類</title><br /><style type="text/css"><br />*{font-size:12px;line-height:20px;}<br />.cls1:before{content:"歡迎光臨我的網站";display:block;border-bottom:solid 1px #ccc;line-height:25px;}<br />.cls1:after{content:"著作權 2009";display:block;border-top:solid 1px #ccc;line-height:25px;}<br /></style><br /></head><br /><body><br /><p class="cls1">這是一段文字，示範偽類的用法，只有在IE8或Safari,Chrome,FireFox,Chrome,Opera上才能看見before,after的內容</p><br /></body><br /></html><br />

運行代碼 

以上屬性選取器可以在http://www.w3.org/TR/CSS2/selector.html查到官方權威資訊

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More