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>

效果图：

巴特西

css笔记04：属性选择器

最新文章

热门文章