CSS property selector
CSS Attribute Selector
HTML element style with specific attributes
HTML element style with specific attributes is not just class and id.
Note: IE7 and IE8 need to declare!DOCTYPE to support attribute selectors! IE6 and lower versions do not support attribute selectors.
Attribute Selector
The following example turns all elements containing the title blue :
<!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中文網(wǎng)" href="http://ipnx.cn">PHP中文網(wǎng)</a>
<hr>
<h2>PHP.cn</h2>
<p>Hello!</p>
</body>
</html>Run the program to try it
Attribute and value selector
The following example changes the title Border style of title='php.cn' element:
<!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://ipnx.cnc">php中文網(wǎng)</a>
<hr>
<h2>將不適用:</h2>
<p title="greeting">Hi!</p>
<a class="php.cn" href="http://ipnx.cn">php中文網(wǎng)</a>
</body>
</html>Run the program to try it
Attribute and value selector - multi-value
The following is an example of an element style that contains a title attribute with a specified value. Use (~) to separate the attribute and value:
<!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>Run the program to try it
The following is an example of an element style that contains a lang attribute with a specified value. Use (|) to separate the attribute and value:
<!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>Run the program to try it
Form style
Attribute selector style does not need to use the form of class or 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>Run the program to try it
