CSS3 adds attribute selectors: [attribute * = value], [attribute ^ = value], [attribute $ = value], and css3attribute

CSS3 adds attribute selectors: [attribute * = value], [attribute ^ = value], [attribute $ = value], and css3attribute

In CSS3, the [attribute * = value], [attribute ^ = value], and [attribute $ = value] selectors are added, so that the attribute selectors have the concept of wildcards.

The following is a complete sample code that uses these three attributes and the displayed page after running:

<! DOCTYPE html> 

Display the Running Effect in the browser:


The following example describes the CSS3 attribute selector.
1. [attribute * = value] attribute Selector
[Attribute * = value] The meaning of the attribute selector is to select the HTML element containing the value string in the attribute.
In the preceding example, [id * = irs], attribute is id, and value is irs. In this way, you must select the element containing the "irs" string in the id attribute, that is, the first div element, set the background color of the element to red.
2. [attribute ^ = value] attribute Selector

[Attribute ^ = value] attribute selector means to select an HTML element starting with a value string in the attribute.
In the preceding example, [id ^ = sec], attribute is id, and value is sec. In this way, you must select the element starting with the "sec" string in the id attribute, that is, the second div element, set the background color of the element to blue.
3. [attribute $ = value] attribute Selector

[Attribute $ = value] attribute selector means to select an HTML element ending with a value string in attribute.
In the above example, [id $ = ird], attribute is id, and value is ird. In this way, you must select the element ending with the "ird" string in the id attribute, that is, the third div element, set the background color of the element to green.