Pemilih sifat 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:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
[title]
{
color:blue;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="php中文网" href="http://www.php.cn">php中文网</a>
<hr>
<h2>Will not apply to:</h2>
<p>Hello!</p>
</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat tika dalam talian

Pemilih atribut dan nilai

Contoh berikut berubah gaya sempadan tajuk title='php tapak web Cina' elemen:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>  
<style>
[title=phpzww]
{
	border:5px solid green;
}
</style>
</head>

<body>
<h2>将适用:</h2>
<img title="php中文网" src="https://img.php.cn/upload/course/000/000/015/5c64ff4f37698935.png" width="270" height="80" />
<br>
<a title="php中文网" href="http://www.php.cn">php中文网</a>
<hr>
<h2>将不适用:</h2>
<p title="greeting">Hi!</p>
<a class="phpzww" href="http://www.php.cn">php中文网</a>
</body>
</html>

Jalankan contoh»

Klik butang "Jalankan Contoh" untuk melihat tika dalam talian

Pemilih untuk atribut dan nilai - berbilang nilai

Berikut ialah atribut tajuk yang mengandungi nilai yang ditentukan Contoh gaya elemen, menggunakan (~) untuk memisahkan atribut dan nilai:

Instance

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

Run Instance»

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

Berikut ialah contoh gaya elemen yang mengandungi atribut lang dengan nilai yang ditentukan Gunakan (|) untuk memisahkan atribut dan nilai:

Instance

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

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Gaya Borang

Gaya pemilih atribut tidak perlu menggunakan bentuk kelas atau id:

Instance

<!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:yellow;
}
input[type="button"]
{
	width:120px;
	margin-left:35px;
	display:block;
}
</style>
</head>
<body>

<form name="input" action="demo-form.php" method="get">
用户名:<input type="text" name="name" value="Peter" size="20">
密码:<input type="text" name="password" value="123456" size="20">
<input type="button" value="按钮">

</form>
</body>
</html>

Instance berjalan»

Klik butang "Run Instance" untuk melihat contoh dalam talian