CSS屬性選取器 (CSS Attribute Selector)

 

之前有寫過css 選取器的文章,這一篇再針對其中的屬性選取器來寫詳細一點的介紹。

屬性選取器的用法有以下幾種:

  1. Element[attribute]
    物件[屬性]
  2. Element[attribute=value]
    物件[屬性=屬性值]
  3. Element[attribute~=value]
    物件[屬性~=屬性值]
  4. Element[attribute|=value]
    物件[屬性|=屬性值]
  5. Element[attribute^=value]
    物件[屬性^=屬性值]
  6. Element[attribute$=value]
    物件[屬性$=屬性值]
  7. Element[attribute*=value]
    物件[屬性*=屬性值]

edit

Element[attribute]
物件[屬性]

這樣的寫法物件必需帶有指定的屬性才可以

Element[attribute=value]
物件[屬性=屬性值]

這樣的寫法物件必需帶有指定的屬性並且符合指定的屬性值才可以

Element[attribute~=value]
物件[屬性~=屬性值]

這樣的寫法是屬性值要包含關鍵字(字串,前/後空格的)

Element[attribute|=value]
物件[屬性|=屬性值]

這樣的寫法是屬性值要包含關鍵字串(前/後空格的,或是後面接"-“的)

Element[attribute^=value]
物件[屬性^=屬性值]

這樣的寫法是屬性值開頭要包含指定的關鍵字元

Element[attribute$=value]
物件[屬性$=屬性值]

這樣的寫法是屬性值結尾要包含指定的關鍵字元

Element[attribute*=value]
物件[屬性*=屬性值]

這樣的寫法是屬性值要包含指定的關鍵字元

Leave a Reply