CSS3 learning notes attributes Selector

CSS3 learning notes attributes Selector

The attribute selector can give the element attributes to match the element. CSS3 also supports locating the element based on pattern matching. The attribute selector syntax is as follows:

Selector	Function Description
E [attr]	Select the matching Eelement with the attr attribute. E can be omitted, indicating that any element of the attr attribute is selected.
E [attr = value]	Select the matching Eelement with the attr attribute, and the attr attribute value is val (in which val is case sensitive). If the Eelement is omitted, it indicates that any type of element with the attr attribute value set to val is selected.
E [attr | = val]	Select matching Eelement, And the Eelement defines the attribute attr. the attr attribute value is a property value with val or starting with val. It is often used in lang attributes (for example, lang = "en-US "). For example, p [lang = en] defines any paragraph that matches as English, whether it is English or American.
E [attr ~ = Val]	The Eelement is matched, and the Eelement defines the attribute value attr. the attr attribute value has multiple space-separated values, one of which is equal to val. For example,. info [title ~ = More] the matching element will have the class name info, and this element has a property title, and the title property value is any element that contains "more", such as click me
E [attr * = val]	Matches Element E, and Element E defines the attribute attr. The attribute value contains val at any position. In other words, the string val matches any position in the attribute value.
E [attr ^ = val]	Matches Element E, and the Eelement defines the attribute attr. Its attribute value is any string starting with val.
E [attr $ = val]	Select Matching Element E, and the E element defines the attribute attr. The attribute value of any string ending with val is exactly the opposite of E [attr ^ = val ].

Browser compatibility: IE7 + and all versions of FF, Chrome, Safari, and Opera Support attribute selectors.

The following example shows how to use the attribute selector. First, write a simple HTML program:

 Use of CSS3 attribute Selector  12345678910

The display effect is as follows:

E [attr] attribute Selector

Select all the elements with the id attribute and change the background color of the matching elements. Add the following code at the end of the CSS style section of the HTML code above:

a[id] {      background-color:yellow;}

The display effect is as follows:

E [attr = val] attribute Selector

Element E sets the attribute attr and its attribute value is val. Add the following code at the end of the CSS style of the preceding html code:

a[id=first] {    background-color: red;}

The display effect is as follows:

E [attr "= val] attribute Selector

Select the element of all string attributes whose attr attribute value is equal to or prefixed with val-. Add the following code after the html css style above:

a[lang|=zh] {background-color: yellow;}

The display effect is as follows:

E [attr ~ = Val] the attribute selector can be used to match the desired element based on a word in the list of element values. Add the following code to the CSS style of the above HTML page:

a[title~=website] {background-color: green;}

The display effect is as follows:
E [attr * = val] attribute select thick ky "http://www.bkjia.com/kf/ware/vc/" target = "_ blank" class = "keylink"> incubator/LqsdmFs19a3 + 7suctuqsvyo6zu2snpw + incubator + cq91 + 6689T2vNPI58/Incubator" brush: java; "> a [class * = links] {background-color: pink ;}The display effect is as follows:
E [attr ^ = val] the attribute selector Selects all elements starting with val in the attr attribute. The following code is added at the end of the CSS style on the preceding HTML page:

a[href^=http] {background-color: crimson;}

The display effect is as follows:

E [attr $ = val] the attribute selector Selects all elements whose attributes end with val, and adds the following code at the end of the preceding html code:

a[href$=png] {background-color: cyan;}

The display effect is as follows: