[The CSS] attribute selector (CSS attribute selector)

@(CSS)

TL;DR

[attribute]          
[attribute = "value"]    // having a specific attribute and attribute values 
[~ attribute = "value"]    // contains a property value (blank bins) 
[attribute | = "value"]    / / in order - beginning with 
[^ attribute = "value"]    // in the beginning the value of a property attribute 
[attribute $ = "value"]    // attribute to an attribute value of the end of the 
[attribute * = "value"]    / / attribute contains a character genus

Simple Attribute Selection [attribute]

Select all have titleelements of attributes:

1	[title]{ ... }

Select all have the hrefattributes of <a>elements:

1	a[href]{ ... }

Having both selection hrefand titleattributes of <a>elements:

1	a[href][title]{ ... }

Select [attribute = "value"] According to a particular attribute value

Attributes and attribute values must match exactly

Selecting a specific hrefattribute value of <a>the element:

1	a[href="www.google.com.tw"]{...}

Selecting a specific hrefattribute values and titleattribute values of <a>the element

1	a[href="www.google.com.tw"][title="W3School"]{ ... }

Select [attribute ~ = "value"] The section attribute value

If you need to select (you can ignore the spaces between the property value) based on the attribute values of a word, you need to use the tilde ( ~)

1	div[data-color ~= "blue"]{ ... }

Substring matching attribute selector

1
2
3

[^ abc = "def"] {...}    // at the beginning of the attribute value abc def properties 
[abc $ = "def"] {...}    // end to abc def attribute value attribute 
[abc = * "def"] {...}    // abc attribute contains attribute value def

Select the type of specific attributes

1	[abc \| = "en] {...} // begin en en- attribute value or attribute abc

Suppose a HTML document in a series of pictures, each picture file name of the form figure-1.jpgand figure-2.jpg. Can use the following selectors match all these images:

1	img[src\|="figure"] {...}

Cankaoziliao

CSS Attribute Selector @ MDN
CSS Selector Attribute @ W3School

Original: Large column [CSS] attribute selectors (CSS attribute selector)