Rumah > Artikel > hujung hadapan web > Apakah tiga jenis pemilih atribut dalam css3

Apakah tiga jenis pemilih atribut dalam css3

青灯夜游asal: 2021-12-14 18:50:123315semak imbas

Tiga pemilih atribut dalam CSS3: 1. "[Attribute name^=value]", sepadan dengan setiap elemen yang nilai atributnya bermula dengan nilai yang ditentukan 2. "[Attribute name$=value]" , sepadan dengan setiap elemen yang nilai atributnya berakhir dengan nilai yang ditentukan; 3. "[Nama atribut*=nilai]", sepadan dengan setiap elemen yang nilai atributnya mengandungi nilai yang ditentukan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Tiga pemilih atribut dalam css3

属性选择器	描述	示例	示例说明	CSS
[attribute^=value]	匹配属性值以指定值开头的每个元素	a[src^="https"]	选择每一个src属性的值以"https"开头的元素	3
[attribute$=value]	匹配属性值以指定值结尾的每个元素	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
[attribute=value*]	匹配属性值中包含指定值的每个元素	a[src*="44lan"]	选择每一个src属性的值包含子字符串"44lan"的元素	3

[attribute^=value]Pemilih atribut

Pemilih [attribute^=value] sepadan dengan elemen yang nilai atributnya bermula dengan nilai yang ditentukan.

Contoh:

Tetapkan warna latar belakang semua elemen div yang nilai atribut kelasnya bermula dengan "ujian"

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

Apakah tiga jenis pemilih atribut dalam css3

<strong>[attribute$=value]</strong>[attribute$=value]Attribute Selector

[attribute$=value] Pemilih sepadan dengan nilai atribut elemen yang berakhir dengan nilai yang ditentukan elemen.

Contoh:

Tetapkan warna latar belakang semua elemen yang nilai atribut kelasnya berakhir dengan "ujian":

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

Apakah tiga jenis pemilih atribut dalam css3

[attribute*=value]Pemilih Atribut

[attribute*=value] Pemilih sepadan dengan elemen yang nilai atributnya mengandungi nilai yang ditentukan.

Contoh:

Tetapkan warna latar belakang semua elemen yang nilai atribut kelasnya mengandungi "ujian"

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

Apakah tiga jenis pemilih atribut dalam css3

(Video pembelajaran perkongsian :tutorial video css

)

Atas ialah kandungan terperinci Apakah tiga jenis pemilih atribut dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 字符串 class Attribute 选择器 https

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Apakah pemilih baharu dalam css3?Artikel seterusnya：Apakah pemilih baharu dalam css3?

Artikel berkaitan

Lihat lagi