发布日期:2014-02-12 14:09 来源: 标签: CSS 选择符
属性选择符可以匹配HTML(XHTML、XML)文档中元素定义的属性、属性值或属性值的一部分。
       属性选择符可以匹配HTML(XHTML、XML)文档中元素定义的属性、属性值或属性值的一部分,本节将介绍的属性选择符如下:
       属性名选择符
       E[att] -- 匹配文档中具有att属性的E元素
       属性值选择符
       E[att=val] -- 匹配文档中具有att属性且其值为val的E元素
       E[att~=val] -- 匹配文档中具有att属性且其中一个值(多个值使用空格分隔)为val(val不能包含空格)的E元素
       E[att|=val] -- 匹配文档中具有att属性且其中一个值为val,或者以val开头紧随其后的是连字符-的E元素(主要用来允许语言编码的匹配,例如HTML中的hreflang属性。关于lang(或 xml:lang)语言码的比配,可查看:lang伪类)
      属性值子串选择符
      E[att^=val] -- 匹配文档中具有att属性且其值的前缀为val的E元素
      E[att$=val] -- 匹配文档中具有att属性且其值的后缀为val的E元素
      E[att*=val] -- 匹配文档中具有att属性且其包含val的E元素
      E[att] -- CSS属性名选择符,匹配文档中具有att属性的E元素
      语法: E[att]
      E -- 元素
     att -- 属性
     说明:匹配文档中具有att属性的E元素,例如a[title]选择符,表示具有title属性的a元素,att,是attribute的缩写,中文"属性"
     示例
a[title]
{
 color:red;
 border: 1px solid blue;
}
input[type]
{
 border: 1px solid blue;
 background: green;
}
      所有具有title属性的a标签将显示红色的文字,并显示蓝色边框

E[att=val] -- CSS E[att=val] 属性值选择符,匹配文档中具有att属性且其值为val的E元素语法: E[att=val]
       E -- 元素
       att -- 属性
       val -- 属性值
       说明:匹配文档中元素的属性att的值为val的元素,例如a[title=dreamdu]选择符,表示具有title属性且其值为dreamdu的a元素
att,是attribute的缩写,中文"属性"。val,是value的缩写,中文"值"
       示例
a[title="dreamdu"]
{
 color:red;
}
input[type="text"]

 background: green;
 color: white;
 border: 1px solid blue;
}
input[type="password"]

 background: blue;
 color: white;
 border: 1px solid green;
}
      所有title值为dreamdu的a标签的文字颜色将显示红色
      属性值选择符也可以匹配多个属性,例如:
*[title="dreamdu"][href="http://www.cnzz.cn/"]
{
 color: pink;
 border: 1px solid blue;
}
      只有title为dreamdu和href为http://www.cnzz.cn/的标签,文字才显示粉色

        E[att~=val] -- CSS E[att~=val] 属性值选择符,匹配文档中具有att属性且其中一个值(多个值使用空格分隔)为val(val不能包含空格)的E元素
       语法: E[att~=val]
       E -- 元素
       att -- 属性
      val -- 属性值
      说明:匹配文档中元素的属性att的其中一个值(多个值使用空格分隔)为val的元素(val不能包含空格),例如a[title~=dreamdu]选择符,表示具有title属性且其中一个值为dreamdu的a元素。att,是attribute的缩写,中文"属性"。val,是value的缩写,中文"值"
      示例

a[title~="dreamdu"]

{

 color:red;

}

<a href="http://www.cnzz.cn/" title="www dreamdu com">红色</a>

       title属性包含三个值(多个值使用空格分隔),其中一个为dreamdu,因此可匹配样式E[att|=val] -- CSS E[att|=val] 属性值选择符,匹配文档中具有att属性且其中一个值为val,或者以val开头紧随其后的是连字符-的E元素(主要用来允许语言编码的匹配,例如HTML中的hreflang属性。关于lang(或 xml:lang)语言码的匹配,可查看:lang伪类)

     语法: E[att|=val]
      E -- 元素
      att -- 属性
     val -- 属性值
      说明:匹配文档中元素的属性att的值为val,或者以val开头紧随其后的是连字符-的元素,例如a[hreflang|="en"]选择符,表示具有hreflang属性且值为en或en开头后加"-"(例如:en-US)的a元素
att,是attribute的缩写,中文"属性"。val,是value的缩写,中文"值"
      示例

*[lang|="en"]

{

 color: red;

}

*[lang|="zh"]

{

 color: blue;

}

<p lang="en">红色</p>

<p lang="en-US">红色</p>

<p lang="zh">蓝色</p>

        E[att^=val] -- CSS E[att^=val]属性值子串选择符,匹配文档中具有att属性且其值的前缀为val的E元素
       语法: E[att^=val]
       E -- 元素
       att -- 属性
       val -- 属性值
      说明:匹配文档中元素具有属性att,且其值的前缀为val的元素,例如a[href^="https://"]选择符,匹配具有href属性且值的前缀为https://的a元素属性值必须是CSS标示符或字符串。att,是attribute的缩写,中文"属性"。val,是value的缩写,中文"值"
推荐: 如果字符串A是字符串B的一部分,我们将A称为B的子串。CSS属性子串选择符可以通过一个字符串是否出现在另一个字符串前面、后面或之间的任意部分匹配样式
       示例

a[href^="mailto"] 

{

 color: green;

 background: url(/images/css/icon-mail.png) center right no-repeat;

}

a[href^="https://"]

{

 color:red;

 background: url(/images/css/icon-ssl.png) center right no-repeat;

}

a[href^="ftp://"]

{

 color:gold;

 background: url(/images/css/icon-file.png) center right no-repeat;

}

      上面示例根据不同的链接协议匹配不同的样式图片,此示例中的图片选自mediawiki
       E[att$=val] -- CSS E[att$=val] 属性值子串选择符,匹配文档中具有att属性且其值的后缀为val的E元素
      语法: E[att$=val]
      E -- 元素
      att -- 属性
      val -- 属性值
      说明:匹配文档中元素具有属性att,且其值的后缀为val的元素,例如a[href$=".html"]选择符,表示具有href属性且值以.html结尾的a元素,属性值必须是CSS标示符或字符串。att,是attribute的缩写,中文"属性"。val,是value的缩写,中文"值"
推荐: 如果字符串A是字符串B的一部分,我们将A称为B的子串。CSS属性子串选择符可以通过一个字符串是否出现在另一个字符串前面、后面或之间的任意部分匹配样式。
      示例

a[href$=".html"]

{

 color:red;

}

a[href$=".php"]

{

 color:green;

}

a[href$=".jsp"]

{

 color:blue;

}

         为不同的链接文件匹配不同的样式
         E[att*=val] -- CSS E[att*=val] 属性值子串选择符,匹配文档中具有att属性且其包含val的E元素
        语法: E[att*=val]
        E -- 元素
       att -- 属性
       val -- 属性值
      说明:匹配文档中元素具有属性att,且其值包含val的元素,例如a[href*=".php"]选择符,表示具有href属性且值包含.php的a元素
属性值必须是CSS标示符或字符串。att,是attribute的缩写,中文"属性"。val,是value的缩写,中文"值"
      推荐: 如果字符串A是字符串B的一部分,我们将A称为B的子串。CSS属性子串选择符可以通过一个字符串是否出现在另一个字符串前面、后面或之间的任意部分匹配样式
       示例

a[href*=".html"]

{

 color:red;

}

a[href*=".php"]

{

 color:green;

}

a[href*=".jsp"]

{

 color:blue;

}

<a href="http://www.dreamdu.com/css.html?id=1&name=www">红色字体</a>

<a href="http://www.dreamdu.com/css.php?id=2&name=dreamdu">绿色字体</a>

<a href="http://www.dreamdu.com/css.jsp?id=3&name=com">蓝色字体</a>

       由于多数动态网页的网址后都有参数,因此可以使用[att*=val]匹配动态网页的样式

相关评论

专题信息
    如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性。CSS最主要的目的是将文件的内容与显示分隔开来,有着许多的好处。如果你是初学者,那么就从我们的 CSS 入门基础教程开始吧,相信您肯定会受益良多的。