Vichair's Blog

前几天更新主题的时候顺便更新了豆瓣秀的CSS,让其显示我的主页这个链接。豆瓣秀是用JS输出的，由于输出的内容没有给元素定义任何的id或者类名，所以我在修改的时候遇到了麻烦。首先我想到用JS来解决，应该很简单，但考虑了一下还是在网上查了一下有没有办法通过CSS来解决。最后通过CSS的属性选择符E[att]解决了这个问题，当然是要比JS还简单，写篇日志记录一下,顺便总结一下CSS的选择符。

CSS的属性选择符有7个（截止到CSS3）（IE6发言:讨厌啦，这些我都不认识）：

• E[att]
  选择具有att属性的E元素。例如：

  1 2 3 4 5

  <style type="text/css"> p[title] {color:#123456}; /*p元素包含title属性*/ </style> <p title="value">不给力啊老湿</p>

• E[att="value"]
  选择具有att属性且属性值等于value的E元素。例如：

  1 2 3 4 5

  <style type="text/css"> p[title=”value”] {color:#123456}; /*p元素包含title属性而且title属性的值为value*/ </style> <p title="value">你们这些死妖怪开挂了吧</p>

• E[att~="value"]
  选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于value的E元素，这里的value不能包含空格。例如：

  1 2 3 4 5

  <style type="text/css"> p[title~=”web”] {color:#123456}; /*p元素包含title属性，且属性的值被空格分隔，且被分隔的属性里有web这个值*/ </style> <p title="value wote web">你这是蓝猫淘气三千踢啊</p>

• E[att|="value"]
  选择具有att属性且属性值为一用连字符(-)分隔的字词列表，由value开始的E元素。例如：

  1 2 3 4 5

  <style type="text/css"> p[title|=”vlaue”] {color:#123456}; /*p元素包含title属性，且属性的值为value开头，且value后紧跟着连字符-*/ </style> <p title="value-yamiedie">杂念 玩蛋去吧</p>

• E[att^="value"]
  选择具有att属性、且值以value开头的E元素。例如：

  1 2 3 4 5

  <style type="text/css"> p[title^=”va”] {color:#123456}; /*p元素包含title属性，且title属性的值以va开头*/ </style> <p title="value">你心目中的世界观根本就是个BUG啊</p>

• E[att$="value"]
  选择具有att属性、且值以value结尾的E元素。例如：

  1 2 3 4 5

  <style type="text/css"> p[title$=”ue”] {color:#123456}; /*p元素包含title属性，且title属性的值以ue结尾*/ </style> <p title="value">我比那什么春什么可什么著爷们多了</p>

• E[att*="value"]
  选择具有att属性、且值中含有value的E元素。例如：

  1 2 3 4 5

  <style type="text/css"> p[title*="alu"] {color:#123456}; /*p元素包含title属性，且title属性的值中包含alu*/ </style> <p title="value">老北京腔 北京大鼓书</p>

属性选择符应该用到地方比较少，不过了解一下也蛮有用的。比如提供附件下载的时候可以通过a标签href属性的值来给这个a标签加一个背景图，使用E[att$="value"]这个选择符就能很方便的做到这一点。其余的用途可能在定义一些网站提供的修改模板的时候能用的倒，自己架设网站的话前端模板的标签基本都是自己定义，所以基本上是用不大到的。但仔细考虑一下其实属性选择符用在有些特殊的情况下也比较方便（仅限于有些）。比如：

这段代码的效果和下面这段代码效果是一样的

一个思路，代码并没有节省，实际应用中可能会碰到这种也不一定。总结完毕，玩蛋去了。