css笔记04：属性选择器

1.属性选择器：

带有 title 属性的所有元素设置样式：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
 <style type="text/css">
 [title]
 {
 color:red;
 }
 </style>
 </head>

 <body>
 <h1>可以应用样式：</h1>
 <h2 title="Hello">Hello world</h2>
 <a title="School" href="http://w3school.com.cn">W3School</a>

 <hr />

 <h1>无法应用样式：</h1>
 <h2>Hello world</h2>
 <a href="http://w3school.com.cn">W3School</a>
 </body>
 </html>

2.属性和值选择器：

下面的例子为 title="W3School" 的所有元素设置样式：这里title = "W3School",如果title不等于"W3School"，属性是不会应用的

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
 <style type="text/css">
 [title=W3School]
 {
 border:5px solid blue;
 }
 </style>
 </head>

 <body>
 <h1>可以应用样式：</h1>
 <img title="W3School" src="/i/w3school_logo_white.gif" />
 <br />
 <a title="W3School" href="http://w3school.com.cn">W3School</a>
 <hr />

 <h1>无法应用样式：</h1>
 <p title="greeting">Hi!</p>
 <a class="W3School" href="http://w3school.com.cn">W3School</a>
 </body>
 </html>

3.属性和值选择器 - 多个值

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

 [title~=hello]这种用法有点类似关键字一样，如果title属性中含有hello这个单词，就应用属性

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
 <style type="text/css">
 [title~=hello]
 {
 color:red;
 }
 </style>
 </head>

 <body>
 <h1>可以应用样式：</h1>
 <h2 title="hello world">Hello world</h2>
 <p title="student hello">Hello W3School students!</h1>
 <hr />

 <h1>无法应用样式：</h1>
 <h2 title="world">Hello world</h2>
 <p title="student">Hello W3School students!</p>
 </body>
 </html>

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
 <style type="text/css">
 [lang|=en]
 {
 color:red;
 }
 </style>
 </head>

 <body>
 <h1>可以应用样式：</h1>
 <p lang="en">Hello!</p>
 <p lang="en-us">Hi!</p>
 <hr />

 <h1>无法应用样式：</h1>
 <p lang="us">Hi!</p>
 <p lang="zh">Hao!</p>
 </body>
 </html>

效果图：

4.设置表单样式：

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
 <style>
 input[type="text"]
 {
   width:150px;
   display:block;
   margin-bottom:10px;
   background-color:yellow;
   font-family: Verdana, Arial;
 }

 input[type="button"]
 {
   width:120px;
   margin-left:35px;
   display:block;
   font-family: Verdana, Arial;
 }
 </style>
 </head>
 <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>
 </body>
 </html>

效果图：