Pemilih sifat CSS
Pemilih Atribut CSS
Gaya elemen HTML dengan atribut khusus
Gaya elemen HTML dengan atribut khusus bukan sekadar kelas dan id.
Nota: IE7 dan IE8 perlu mengisytiharkan Hanya DOCTYPE yang menyokong pemilih atribut! IE6 dan versi yang lebih rendah tidak menyokong pemilih atribut.
Pemilih Atribut
Contoh berikut menjadikan semua elemen yang mengandungi tajuk menjadi biru :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
[title]
{
color:blue;
}
</style>
</head>
<body>
<h2>我沒(méi)有變</h2>
<h1 title="Hello world">Hello world</h1>
<a title="PHP中文網(wǎng)" href="http://m.miracleart.cn">PHP中文網(wǎng)</a>
<hr>
<h2>PHP.cn</h2>
<p>Hello!</p>
</body>
</html>Jalankan program untuk mencubanya
Pemilih atribut dan nilai
Contoh di bawah menukar tajuk Gaya sempadan tajuk=' Elemen php.cn':
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
[title=w3cschool]
{
border:5px solid green;
}
</style>
</head>
<body>
<h2>將適用:</h2>
<img title="php.cn" src="/upload/course/000/000/006/5809800b44336872.jpg" width="270" height="50" />
<br>
<a title="php.cn" href="http://m.miracleart.cnc">php中文網(wǎng)</a>
<hr>
<h2>將不適用:</h2>
<p title="greeting">Hi!</p>
<a class="php.cn" href="http://m.miracleart.cn">php中文網(wǎng)</a>
</body>
</html>Jalankan atur cara untuk mencubanya
Pemilih untuk atribut dan nilai - berbilang nilai
Berikut ialah contoh gaya elemen yang mengandungi atribut tajuk dengan nilai yang ditentukan, menggunakan (~) untuk memisahkan atribut dan nilai:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
[title~=hello]
{
color:blue;
}
</style>
</head>
<body>
<h2>將適用:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<hr>
<h2>將不適用:</h2>
<p title="student">Hi CSS students!</p>
</body>
</html>Jalankan atur cara untuk mencuba it out
Berikut ialah contoh gaya elemen yang mengandungi atribut lang dengan nilai yang ditentukan, menggunakan (|) untuk memisahkan atribut dan nilai:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
[lang|=en]
{
color:blue;
}
</style>
</head>
<body>
<h2>將適用:</h2>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<hr>
<h2>將不適用:</h2>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
</body>
</html>Jalankan program untuk mencubanya
Gaya borang
Gaya pemilih atribut tidak perlu menggunakan bentuk kelas atau id:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color: #d2ffd6;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
姓名:<input type="text" name="name" value="" size="20" placeholder="請(qǐng)輸入你的姓名">
密碼:<input type="text" name="pwd" value="" size="20" placeholder="請(qǐng)輸入你的密碼">
<input type="button" value="提交">
</form>
</body>
</html>Jalankan program untuk mencubanya
