Home > Article > Web Front-end > What are the three types of attribute selectors in css3
Three attribute selectors in css3: 1. "[Attribute name^=value]", matches every element whose attribute value starts with the specified value; 2. "[Attribute name$=value]" , matches every element whose attribute value ends with the specified value; 3. "[Attribute name*=value]", matches every element whose attribute value contains the specified value.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Three attribute selectors in css3
| Attribute selector | Description | Example | Example description | CSS |
|---|---|---|---|---|
| attribute^=value] | Match every element whose attribute value starts with the specified valuea[src^="https"] | Select each src attribute whose value starts with " Elements starting with https" | 3 | |
| attribute$=value] | match attributes Every element whose value ends with the specified valuea[src$=".pdf"] | Select every element whose src attribute value ends with ".pdf" | 3 | |
| *=value] Matches every element whose attribute value contains the specified value | a[src*="44lan"] | Select each element whose src attribute value contains the substring "44lan" | 3 |
[attribute^=value]Attribute selector
[attribute^=value] Selector matches element attribute The value starts with the element with the specified value.
Example:
Set the background color of all div elements whose class attribute value starts with "test"
The first div element.The second div element.The third div element.This is some text in a paragraph.
[attribute$=value]Attribute selector[attribute$=value] The selector matches elements whose attribute values end with the specified value.
Example:
Set the background color of all elements whose class attribute value ends with "test":
The first div element.The second div element.The third div element.This is some text in a paragraph.
[attribute*=value]Attribute selector[attribute*=value] The selector matches elements whose attribute value contains the specified value.
Example:
Set the background color of all elements whose class attribute value contains "test"
The first div element.The second div element.The third div element.This is some text in a paragraph.
(Learning video sharing:
The above is the detailed content of What are the three types of attribute selectors in css3. For more information, please follow other related articles on the PHP Chinese website!
