先附上代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2012年4月26日</title> <meta name="Keywords" content="属性选择符" /> <meta name="Description" content="" /> <meta name="author" content="冷海圣 三 QQ:448494242" /> <meta http-equiv="window-target" content="_top" /> <meta http-equiv="pragma" content="no-cache" /> <!-- <link type="text/css" href="styles/reset.css" rel="stylesheet" /> <link type="text/css" href="styles/layout.css" rel="stylesheet" /> --> <link rel="shortcut icon" href="images/ico/favicon.ico" type="image/x-icon" /> <link rel="Bookmark" href="images/ico/favicon.ico" > <style type="text/css"> code{ white-space:pre; } p[title]{ padding:5px 10px; border:1px solid gray; } p[title~="paragraph"]{ background-color:gold; } p[title="#4 paragraph"]{ font-weight:bold; } strong[name="red"]{ color:red; } </style> </head> <body> <h1>属性选择符</h1> <p>这段话没有附加<code>title</code>属性。</p> <p title=""> 这段话附加了<code>title</code>选择符,但是值为空,即<code>title=""</code>,根据《精通CSS与HTML设计模式》中所述:某些浏览器不会对孔元素进行匹配。 <br />事实上,经过测试,该空值在 Chrome 、 Opera 、 Firefox、 Safari、 IE 7 8 9中均成功匹配,<strong name="red">未测试 IE6 ,根据《精通CSS与HTML设计模式》中所述:IE6不支持属性选择符</strong></p> <p title="Second"> <code>p[title]</code>选择了所有附带title属性的段落。</p> <p title="Third paragraph"> <code>p[title~="paragraph"]</code>选择了所有title属性值中包含<code>paragraph</code>单词的段落。</p> <p title="#4 paragraph"> <code>p[title="#4 paragraph"]</code>选择了所有title属性值为<code>#4 paragraph</code>的段落。这种匹配是区分大小写的,而且必须是每个字母(包括空白)都匹配</p> </body> </html>
附上效果图(Chrome下):
经过测试,属性选择符可以匹配任何属性,比如:<input type="text" /> 则使用 input[type="text"]{...},而<input type="password" />则可以使用input[type="password"]{..}
还可以给其他任何属性定义,例如上面的 <strong name="red">..</strong>多么强大...
可惜不适应 IE6,这个算是复习到了,有用的知识