CSS屬性選擇符

來源:互聯網
上載者:User

在CSS的選擇符中,除了常用的“類型選擇符(E)、通配選擇符(*)、包含選擇符(E1 E2)、ID選擇符(#ID)、選擇符分組(E1,E2,E3)、類選擇符(E.class)、偽類及偽對象選擇符(E:P)”外還有“屬性選擇符(E[attr])”和“相鄰選擇符(E1+E2)”,試了一下屬性選擇符,感覺很不錯,如果使用到頁面中的話,會讓CSS的定義更加的強大,可惜現在IE並不支援這一選擇符。

屬性選擇符可分為下面幾種:

Attribute Selectors
E[attr] 屬性選擇符。
選擇具有attr屬性的E。

Attribute Selectors
E[attr=value] 屬性選擇符。
選擇具有attr屬性且屬性值等於value的E。

Attribute Selectors
E[attr~=value] 屬性選擇符。
選擇具有attr屬性且屬性值為一用空格分隔的字詞列表,其中一個等於value的E。

Attribute Selectors
E[attr|=value] 屬性選擇符。
選擇具有attr屬性且屬性值為一用連字號分隔的字詞列表,由value開始的E。

下面看看例子:

--------------------HTML code----------------------
<div class="demo">E[attr=value] 屬性選擇符</div>
<div title="Attribute Selectors">E[attr] 屬性選擇符</div>
<h1 class="dem demo">E[attr~=value] 屬性選擇符</h1>
<h2 class="demo-demo2">E[attr|=value] 屬性選擇符</h2>
------------------------------------------------------------

--------------------CSS code-----------------------
body{line-height:1.3em;color:#000000;}
.demo-demo2{background-color:#FFA500;}
div[title]{color:#FFFFFF;background-color:#0000FF;}
div[class=demo]{color:#FF0000;}
h1[class~=demo]{color:#0000FF;}
h2[class|=demo]{color:#008000;}
-----------------------------------------------------------

相關文章

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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