Home >Web Front-end >Front-end Q&A >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"
<!DOCTYPE html> <html> <head> <style> div[class^="test"] { background:#ffff00; } </style> </head> <body> <div class="first_test">The first div element.</div> <div class="second">The second div element.</div> <div class="test">The third div element.</div> <p class="test">This is some text in a paragraph.</p> </body> </html>
[attribute$=value]<strong></strong>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":
<!DOCTYPE html> <html> <head> <style> [class$="test"] { background:#ffff00; } </style> </head> <body> <div class="first_test">The first div element.</div> <div class="second">The second div element.</div> <div class="test">The third div element.</div> <p class="test">This is some text in a paragraph.</p> </body> </html>
[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"
<!DOCTYPE html> <html> <head> <style> [class*="test"] { background:#ffff00; } </style> </head> <body> <div class="first_test">The first div element.</div> <div class="second">The second div element.</div> <div class="test">The third div element.</div> <p class="test">This is some text in a paragraph.</div> </body> </html>
(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!