5.CSS3-- 选择器--属性选择器

一.属性选择器

• 先回顾css2的属性选择器：

  属性选择器：
  下面的例子是把包含标题（title）的所有元素变为蓝色：

  <h1 title="Hello world">Hello world</h1>
  <a title="runoob.com" href="//www.runoob.com/">runoob.com</a>
  

  <style>
  	[title]
  	{
  	color:blue;
  	}
  </style>
  

  

  属性和值选择器：
  下面的实例改变了标题title='runoob’元素的边框样式:

  <img title="runoob" src="logo.png" width="270" height="50" />
  <br>
  <a title="runoob" href="//www.runoob.com/">runoob</a>
  

  <style>
  	[title=runoob]
  	{
  		border:5px solid green;
  	}
  </style>
  

  

  属性和值的选择器 - 多值：
  下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:

  <h1 title="hello world">Hello world</h1>
  <p title="student hello">Hello CSS students!</p>
  

  <style>
  	[title~=hello]
  	{
  		color:blue;
  	} 
  </style>
  

  

  下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:

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

  <style>
  	[lang|=en]
  	{
  		color:blue;
  	}
  </style>
  

  

  表单样式：
  属性选择器样式无需使用class或id的形式:

  <form name="input" action="demo-form.php" method="get">
  	Firstname:<input type="text" name="fname" value="Peter" size="20">
  	Lastname:<input type="text" name="lname" value="Griffin" size="20">
  	<input type="button" value="Example Button">
  </form>
  

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

  

• C3-选择器
  

  <a href="xxx.pdf">我链接的是PDF文件</a>
  <a href="#" class="icon">我类名是icon</a>
  <a href="#" title="我的title是more">我的title是more</a>
  

  a[class^=icon]{
    background: green;
    color:#fff;
  }
  a[href$=pdf]{
    background: orange;
    color: #fff;
  }
  a[title*=more]{
    background: blue;
    color: #fff;
  }