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)

其实本来想发布2.0的，也就是本人目前用的这样，但是我做的东西都太个人了，也就是我做的是我想要，比如夏天了，把颜色改的艳一点，所以我做的东西大部分是满足自己需要的。我感觉不太适合别人用，所以就不发布了。提供下载的更新版本还是以前那个样式没有变化。感觉之前自己做东西很追求一个叫质感的玩意，解决阴影什么的CSS的用了不少，但看上去并不怎么样，所以这次更新把阴影去掉了一部分，然后修复了一些BUG，支持了侧边栏的widget。顺便研究了一下3.0的新功能：自定义menu导航，我这个主题不适合加这功能，所以没有支持，如果我不懒的话我想写篇关于这个功能的，到底会不会写呢，现在网上也有很多关于这个的文章了，解释的应该也很清楚了，我这么懒。

关于新版本的一些说明：
去掉了原来模板集成的最新评论函数，现在是使用WP Kit CN这个插件，如果要像我现在侧边栏这样的回复效果就必须用这个插件。同时这个插件也很强大，推荐使用。本插件在侧边的设置为评论长度18，头像尺寸12，评论自定义格式为

<div class=”rc_avatar”>%gravatar%</div><div class=”rc_info”>%comment_author%</div><div class=”rc_excerpt”><a href=”%permalink%” title=”on:%post_title%”>%comment_excerpt%</a></div>

另外有豆瓣的朋友如果喜欢我现在这样的豆瓣秀的话，如下操作，新建一个text的widget，内容为

<div class=”db_margin”>

<script type=”text/javascript” src=”http://www.douban.com/service/badge/Vichair/?show=collection&amp;n=8&amp;columns=4&amp;hidelogo=yes&amp;cat=movie|music” ></script></div>

中间的JS链接换成你自己的豆瓣秀链接，豆瓣秀的CSS我已经集成到模板中了。

最后再次感谢喜欢这个主题的朋友们。

Related Posts

• 一切都是新的(17)
• 也谈wordpress自带的嵌套评论(40)
• Wordpress Theme:Lifedit发布(139)

在这个版本更新巨速度的年代，不用说我半年没博，就是十天半个月没关注都能立马让人out掉，所以我立马整了一瓶啤儿茶爽紧步追上。其实之前写blog的时候我也没用过此类的插件，我更喜欢用从opera blog时就养成的习惯：用@来回复评论者。当然我的@都是不带链接的,也不带悬浮框显示被回复者信息的。

好吧，这次做的这个主题虽然只叫好不叫座，不过还是有人提出来要求支持嵌套评论，我就索性回过头去研究了一下（当然我功力尚浅，研究的不深，其实就是让google帮我研究了一下）

嵌套评论本身是一个好东西，能提高访客的互动性，在主题支持的情况下结构性的显示评论列表，当然这是在主题支持的情况下。如果主题不支持嵌套评论，评论列表会显得混乱无比，wordpress是按评论时间排序，这时评论就会显得风马牛不相及了。嵌套评论的设计本身是一个比较麻烦的事情（至少在之前没有接触过的情况下），另外不是所有主题都适合用嵌套评论，比如我现在这个主题，父评论是有背景图的，要保持风格上的统一，设计方面要多做很多工作。还是比如我这个主题：虽然这个主题我让它支持嵌套评论了，但是只支持到3级嵌套，而且风格并不统一，我个人其实也不满意。

简言之就是嵌套评论对主题的依赖性很大，如果大家全都用一个主题的话那就无所谓了，当然这样的话所有做主题的人也都可以去歇着了，哈哈。如果一个主题的样式只设计到3层嵌套，而你需要更多层的时候，这个主题就会变的很难看（如果压根就不支持嵌套的话，那么恭喜你，你自己估计都看不明白之前的评论是谁跟谁说的了）。

说下代码部分，wp的嵌套评论提供两种方法来调用，第一种是用默认的也就是在评论部分用<?php wp_list_comments(); ?>调用。第二种是用callback自定义的函数来调用:<?php wp_list_comments(callback=函数名); ?>。具体怎么添加到主题里，google上是一搜一大堆，我就不复制粘贴了。只扯一下自定义部分，代码我就不复制粘贴了- -去官方看吧

这里说下对于最后一个</li>的关闭标签的看法，默认是没有这个关闭标签的，wordpress会自动补全。不自己添加这个关闭标签的好处是能保证良好的嵌套结构，符合嵌套的意义，但是设计样式的时候比较麻烦，或者用position:absolute;把子评论剥离出来？(具体我没试，只是想法是这样)。加上这个关闭标签之后结构就变了，子评论和父评论同级，虽然不符合嵌套的意义，但是方便设计样式。以上考虑的是评论部分如果使用背景图片的话，比如我现在这个主题- -

如果评论部分没什么图片的话就不要加这个关闭标签了，我觉得应该从结构上保证它的意义。

Related Posts

• 模板更新(14)
• Wordpress Theme:Lifedit发布(139)
• 一切都是新的(17)

这是一个两栏的主题，颜色可能不是大众型的- -另外，我不懂 JS 和 PHP （ JS 刚开始学），能力范围在 XHTML + CSS 能通过验证并保证浏览器的兼容，所以主题没有什么特效之类的，做的东西尽量干净点。一般做主题都是自己用，第一次发布共享，希望能有兴趣的朋友能喜欢。

下面是详细介绍:

1.通过 XHTML1.1 和 CSS3 验证，兼容 IE6 ,IE8 ,FX3.5 ,Chrome ,Safari 等浏览器，Opera 下没看，我懒了没装，不过估计应该问题不大。

2.理论上不需要任何插件，但其实还是需要 simple tags （这个大部分人都有装）,否则不会显示相关文章 (related posts) 。其余的如文章页的随机文章 （random posts） 和侧边栏的最新回复 （recent comments） 都不需要插件，代码都集成在 fucntions.php 中，有需要的可以自行拷贝，均为网上收集，我做了一些修改，这些代码原作者比较难考证，特此表示感谢。
3.推荐使用 wp-pagenavi 插件（我想这个大部分人也都有装）。
注: simple tags 和 wp-pagenavi 启用后均不需要修改设置，主题里已经包含了。当然这不是硬性的，也可以随意在后台修改设置。
4.分类目录是导航条上的 categories，IE6 下这一部分的背景没有阴影，因为太懒不想让这一块拖累所以 IE6 就使用了 GIF 作为背景图格式。只测试了一级子目录，二级子目录没有测试，可能会存在问题。
4.此模板不支持 widget ，考虑过支持，不过觉得用处好像不是很大。
5.不支持嵌套回复，因为很长时间没 BLOG 了，这个东西对我来说还挺新鲜，还没研究。
6.此模板需要自己动手修改的地方:
(1)如果要使用图片作为 BLOG 的 LOGO ，需要将 CSS 文件里 #logo h1 和 #logo h1 a 的注释符删掉，图片高度不要超过 60px 就可以了。
(2)twitter的链接在 header.php ，我水平比较菜，目前还没研究给主题加选项部分，所以只请各位自行修改。
(3)如果侧边栏需要添加东西请到 sidebar.php 自行添加，这个也比较简单，应该都会。

如使用中发现问题请在此回复告知，以便修改。

———————————

这是一个叫好不叫座的主题，尽管这样，我还是更新了：
2010.7.14更新：
1.修正ctrl+enter回复在firefox下失效的问题
2.小细节处理
3.增加侧边栏的widget支持
4.取消集成的最新回复函数，改用WP Kit CN插件提供的最新评论功能，具体设置请看这里
5.有豆瓣的同学同样看刚才的地址

2009.10.25更新：
1.修正侧边栏标签云调用的错误
2.添加ctrl+enter快捷回复

2009.10.23更新：
1.头部各部分的位置做了小调整
2.字体的颜色做了细微调整，文章部分行间距做了细微调整。
3.支持嵌套评论和评论分页
4.修复了侧边栏几个错误链接

Download : Lifedit.zip

Related Posts

• 模板更新(14)
• 也谈wordpress自带的嵌套评论(40)
• 一切都是新的(17)

这段做的这个新模板也在不断的零零碎碎的修改，因为前阵子新做了系统，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)