In the css attribute selector, [attribute ~ = Value] and [attribute * = value]

In the css attribute selector, [attribute ~ = Value] and [attribute * = value]

[Attribute] is used to select an element with a specified attribute. [Attribute = value] is used to select elements with specified attributes and values. [Attribute ~ = Value] is used to select the elements in the attribute value that contain the specified vocabulary. [Attribute | = value] is used to select an element with an attribute value starting with a specified value. The value must be the entire word. [Attribute ^ = value] matches each element whose attribute value starts with a specified value. [Attribute $ = value] matches each element whose attribute value ends with a specified value. [Attribute * = value] matches each element of a specified value in a property value.

 

 

The following example sets a style for all elements that contain the title attribute of the specified value. Applicable to attribute values separated by spaces: [title ~ = Hello] {color: red;} The following example sets a style for all elements with the lang attribute containing the specified value. Applies to attribute values separated by hyphens: [lang | = en] {color: red ;}

 

~ = The value must be an independent word, for example, [title ~ In = test], test a can be selected. testa cannot be selected.
* = The value can be a substring Of the value. For example, test-a, test a, and testa can be selected.
| = And ~ = Features are the same, ^ = and * = features are the same. Therefore, it is better to use ^ = and * = at ordinary times.