What are the three types of attribute selectors in css3-Front-end Q&A-php.cn

What are the three types of attribute selectors in css3

青灯夜游

Release： 2021-12-14 18:50:53

Original

3355 people have browsed it

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

Copy after login

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>

Copy after login

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>

Copy after login

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!