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"]这个选择符就能很方便的做到这一点。其余的用途可能在定义一些网站提供的修改模板的时候能用的倒，自己架设网站的话前端模板的标签基本都是自己定义，所以基本上是用不大到的。但仔细考虑一下其实属性选择符用在有些特殊的情况下也比较方便（仅限于有些）。比如：

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

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

Related Posts

• 小问题小汇总(11)

这段做的这个新模板也在不断的零零碎碎的修改，因为前阵子新做了系统，MultipleIEs丢了注册表不能正常工作，所以刚开始做的时候并没有在IE6下预览。今天看模板在其余浏览器下没什么大毛病了就把MultipleIEs重下载了检查下错误，还好错位现象不多，遇到了几个小问题。

1.IE6的PNG图片透明这个臭名昭著的毛病，只能说IE6烧饼不解释了。最后把几个PNG换成GIF完事，因为一个模板用到的PNG数量不多，没必要去下什么JS包来解决这问题，图片一共没多少K，下个包比图片还大好多。如果使用滤镜解决背景PNG透明问题的话要给该层内的a标签加上position:relative;，否则层内所有a标签失效。

2.如果IE6下某个标签margin为负值，也需要给给该标签加上position:relative。

3.做右下角“回到顶部”按钮时碰到的，本来是用position:fixed定位的，在FX，CHROME,IE8下都挺正常，可这万恶的IE6又不支持这个属性。无奈…不过正好在学习JS，就用JS做了。翻了好半天google终于实现了。中间碰到一个问题:在标准w3c下，document.body.scrollTop一直为0，所以在声明了doctype的情况下要用document.documentElement.scrollTop来代替，这个问题困扰了我大半天。现在脑子里JS的知识微乎其微，还好有google。

以前做模板基本都很少用到css的position，这个模板正好练习了下css的position定位，顺带稍微研究了下JS。刚从当当买了一本《JavaScript DOM编程艺术》，据说是本很不错的入门书，等快递中，哈哈，希望能让我这个没编程基础的人看的轻松点。

Related Posts

• CSS的属性选择符(2)