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中文网" href="http://www.php.cn">PHP中文网</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中文网(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://www.php.cnc">php中文网</a>
<hr>
<h2>将不适用:</h2>
<p title="greeting">Hi!</p>
<a class="php.cn" href="http://www.php.cn">php中文网</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中文网(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中文网(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中文网(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>Run the program to try it
