Home >Web Front-end >Front-end Q&A >What are the three types of attribute selectors in css3

What are the three types of attribute selectors in css3

青灯夜游
青灯夜游Original
2021-12-14 18:50:123353browse

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.

What are the three types of attribute selectors in css3

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Three attribute selectors in css3

##[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[ match attributes Every element whose value ends with the specified valuea[src$=".pdf"]Select every element whose src attribute value ends with ".pdf"3##[attribute
Attribute selector Description Example Example description CSS
attribute^=value]
attribute$=value]
*=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>

What are the three types of attribute selectors in css3

[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>

What are the three types of attribute selectors in css3

[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>

What are the three types of attribute selectors in css3(Learning video sharing:

css video tutorial

)

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn