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>我没有变</h2>
<h1 title="Hello world">Hello world</h1>
<a title="PHP中文网" href="//m.sbmmt.com">PHP中文网</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中文网(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="//m.sbmmt.comc">php中文网</a>
<hr>
<h2>将不适用:</h2>
<p title="greeting">Hi!</p>
<a class="php.cn" href="//m.sbmmt.com">php中文网</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中文网(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中文网(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中文网(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="请输入你的姓名">
密码:<input type="text" name="pwd" value="" size="20" placeholder="请输入你的密码">
<input type="button" value="提交">
</form>
</body>
</html>Jalankan program untuk mencubanya
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
