属性选择符

先附上代码：

<!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，这个算是复习到了，有用的知识

posted @ 2012-04-26 07:34  冷三叔  阅读(430)  评论(0)  编辑  收藏  举报