如何使用CSS 属性选择器
1、属性选择器的外观与其它的选择器有所不同，这在声明上就可以看出来的。
[title]{color:red;}
<h2 title="Hello world">Hello world</h2>
2、属性选择器指定元素。我们在使用属性选择器的时候也可以指定一个元素。
上面定义了，下面引用就可以让元素有了这个样式，不管元素是文字还是图像。
<style type="text/css">
[title=W3School]
{
border:5px solid blue;
}
</style>
body部分
<img title="W3School" src="/i/e.gif" />
<br />
<a title="W3School" href="省略">W3School</a>
<hr />
3、属性和值选择器。我们指定元素的时候可以从一个单词，到一些字母，只要包含相对应的单词就让元素的样式发生作用。
<style type="text/css">
[title~=hello]
{
color:red;
}
</style>
<body>
<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello </h1>
<hr />
4、设置表单的样式。我们可以通过这个属性选择器来为特殊类型的表单设定一个样式外观。
<style>
input[type="text"]
{
width:160px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:140px;
margin-left:34px;
display:block;
font-family: Verdana, Arial;
}
</style>
<body>
<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
</form>
5、[attribute^=value] 这个属性选择器就是指以字母 value 开头的单词。
在代码当中，这个词就是test .
<style>
div[class^="test"]
{
background:#ffff00;
}
</style>
6、[attribute$=value] 这个选择器的使用，就是为了让元素当中以 value结尾的单词。
7、[attribute*=value] 这个选择器的使用，就是为了让元素当中包含value的单词。
