CSS——屬性選取器

標籤：

參考：https://www.codementor.io/css/tutorial/how-to-use-css-selectors

 

Attribute Selectors

1. [attr]

eg: input[type] =>所有設定了type屬性的input標籤都生效(無論type的值是什麼)

 

2. [attr="value"]

eg: input[type="text"]

 

3.Substring Matching Attribute Selectors

>> ^  Begin With Selector

　　a[href^="http://"]

>> $  End With Selector

　　a[href$=".pdf"]

>> *  Contains Selector

　　a[href*="goo"]  包含，不區分大小寫

 

4. [attr~=value]

eg:

　　class="title"

　　class="title colorMe"

>> 常規 [class="title"]　　完全符合，第1個生效

>> ~ [class~="title"]　　 子串匹配，1、2都生效

>> 常規 [class="colorMe"]　　 完全符合，都不生效

>> ~ [class~="colorMe"] 　　 子串匹配，第2個都生效

>> 常規 [class="title colorMe"]　　 完全符合，第2個生效 

>> 常規 [class="colorMe title"]　　 完全符合，都不生效

 

5. [attr|=value]

eg:

　　lang="en"

　　lang="en-es"

　　lang="es"

>> Selecting [lang|=en] : [lang|=en]　　1、2生效(|= 對於串連符可以生效)

>> Selecting [lang|=e] : [lang|=e]　　都不生效

>> Selecting [lang^=e] : [lang^=en]　　都生效

>> [lang|=en],[lang|=es]　　都生效

>> div[lang|=es]　　第2個生效 

CSS——屬性選取器