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"
<!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!