css屬性選取器*=,|=,^=,$=,*=的區別 （學習筆記）

標籤：tor   title   包含   begin   符號   jpg   art   .com   ref   

先上總結:

　　"value是完整單詞" 類型的比較符號:  ~=  ,  |=

　　"拼接字串" 類型的比較符號:  *=  ,  ^=  ,  $=

 

1.attribute屬性中包含value:　

    [attribute~=value] 屬性中包含獨立的單詞為value

　　　　e.g:[title~=flowerr]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />

    [attribute*=value] 屬性中做字串拆分，只要能拆出來value這個詞就行

　　　　e.g:[title~=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

 

2.attribute屬性以value開頭:

　　[attribute|=value] 屬性中必須是完整且唯一的單詞，或者以-分隔開

　　　　e.g:[lang|=en]     -->  <p lang="en">  <p lang="en-us">

　　[attribute^=value] 屬性的前幾個字母是value就可以

　　　　e.g:[lang^=en]    -->  <p lang="ennn">

 

3.attribute屬性以value結尾:

　　[attribute$=value] 屬性的後幾個字母是value就可以

　　　　e.g:a[src$=".pdf"]

css屬性選取器*=,|=,^=,$=,*=的區別 （學習筆記）