Heluyao的博客 {11gz.com}

　　CSS 2有些高级的特性，但目前IE6及更低的版本都是不支持的，郁闷之中… 有幸的是， Firefox和Safari等现代浏览器支持这些高级选择器。没关系，学到手了自然也有用。IE会不断 的完善其对标准的支持，在不久的将来定有机会派上用场，只是如果你现在就用这些高级的特性 ，那么切记一则：在对于站点功能很重要的任何元素上应该避免使用这些高级选择器。

　　利用这些属性可以明显的减少结构层的嵌套及类选择的代码，从而使得我们的文档更轻巧， 更具可用性。嘿嘿，下面我们开始看具体用法及代码示例吧！

　　1. 子选择器和相邻同胞选择器

　　这些高级选择器中的第一个是子选择器。后代选择器选择一个元素的所有后代，而子选择器 只选择元素的直接后代，即子元素。在下面的示例中，外层列表中的列表项显示一个定制的图标 ，而嵌套列表中的列表项不受影响：

　　在IE 6和更低版本中，可以使用通用选择器模拟子选择器的效果。为此，先在所有后代上应 用你希望子元素具有的样式。然后，使用通用选择器覆盖子元素的后代上的样式。所以，要实现 与前面的子选择器示例相同的效果，可以这样做：

　　还可能希望根据一个元素与另一个元素的相邻关系对它应用样式。相邻同胞选择器可用于定 位同一个父元素下某个元素之后的元素。可以使用相邻同胞选择器让顶级标题后面的第一个段落 以粗体显示，同时不影响其他段落：

　　2. 属性选择器

　　顾名思义，属性选择器可以根据某个属性是否存在或属性的值来寻找元素。因此能够实现某 些非常有意思和强大的效果。例如，当鼠标停留在具有title属性的元素上时，大多数浏览器会 显示一个工具提示。可以使用这种特性解释某些内容（比如缩写词）的含义：

　　但是，如果不把鼠标停留在这个元素上，那么没有任何迹象能够表明存在这一额外信息。为 了解决这个问题，可以使用属性选择器对具有title属性的abbr元素应用与其他元素不同的样式 ——在下面的示例中，在它们下面加上点。还可以在鼠标停留在这个元素上时将鼠标指针改为问 号，表示这个元素与众不同，从而提供更多的上下文相关信息。

　　除了根据某个属性是否存在对元素应用样式之外，还可以根据属性值应用样式。例如，使用 rel属性值nofollow链接的站点无法从Google获得评级收益（ranking benefit）。以下规则在这 种链接旁边显示一个图像，以此表示不推荐这个目标站点：

由于IE 6和更低版本不支持属性选择器，有一种更聪明的使用属性选择器的方法。可以对IE 应用一种样式，对更符合标准的浏览器应用另一种样式。例如，IE在显示1像素的点边界方面有 问题，所以可以将点边界显示为虚线。可以使用属性选择器将点边界只应用于能够正确地表现它 的浏览器。这需要寻找class属性而不是使用类选择器。

　　一些属性可以有多个值，值之间用空格分隔。属性选择器允许根据属性值之一寻找元素。例 如，一些开发人员建议在链接的属性中使用预定义的关键字来定义站点拥有者与其他人的关系。 可以利用这一信息将一个图像应用于在rel属性中包含关键字friend的任何链接。

　　一旦这些高级的CSS 2选择器得到广泛的支持，在代码中添加额外的div或类的需求就会大大 减少。

　　很多同学一定在为多列等高的问题头痛吧！今天提供一个很方便的控制多列等高的JS，可以控制多个标签，并循环遍历任意多个标签。不需要添加ID或class。很不错的！

　　先看html代码:

　　这里是JS代码（有用到一个JS库，DOMHelp）:

　　自己复制另存代码，测试一下，应该会与用到的时候。注意该处用到的DOMHelp库，是一个操作文档节点很方便且符合标准并兼容各浏览器的JS库。

　　现在自己对很多事情都已到了麻木的地步，其实自己并不想，自己身边的环境在渐渐的影响自己的信念！

　　自己也时时刻刻在提醒自己，要坚持自己的一些想法，可是没有办法。

　　失去了的，伸手可能也抓不回来，只能当作是回忆，人生中的一个插曲。

　　自己也感觉这两年变化很大，也许自己都不认识自己了，疏远了自己。

　　在一个前端技术很牛的BLOG里找来的。的确很牛，对技术要求到了这种境界，不得不服！

显示属性
display
list-style
position
float
clear

自身属性
width
height
margin
padding
border
background

文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content

　　其实也并非必须如此照此书写顺序，只是养成良好书写习惯，对自己还是有好处啊！在前进的道路中不断美化自己的东西。

　　IE8 (下文中的 IE8 暂时仅代表IE8 beta1) 中增加了 CSS3 中的子串匹配的属性选择器（substring matching attribute selectors），具体规则与正则中的匹配很相似：

• E[att^=’val’] //子串以’val’ 开始
• E[att$=’val’] //子串以’val’ 结束
• E[att*=’val’] //子串中包含’val’

　　IE8 支持绝大多数基本的 CSS2.1 选择器：

1. :before and :after 被支持，只支持文本，不支持图片，但还存在bug 。
2. :focus 被支持。
3. display: inline-block 被支持（只能用于内联元素）。
4. display: table 被支持。
5. list-style 完全被支持，包括值 upper-greek （此值其他浏览器均未支持）。
6. outline 被支持。
7. border-collapse, border-spacing 和 caption-side 被支持。
8. white-space 完全被支持。
9. box-sizing 被支持，不过使用的是私有属性 -ms-box-sizing 。

　　不支持的包括但不限于：:first-line 、:first-letter、opacity 和 RGBA。

　　对于原来用来区分 IE 的 HACK 在 IE8 中基本失效（比如*property:value、*property:value等）。

Update 08-3.8：

1. 原有 IE 的 list-item whitespace bug 在 IE8 中依旧存在。
2. 原有 IE 的 z-index bug 在 IE8 中依旧存在。
3. IE8 中产生新的 bug：当 line-heigth 小于正常值时，超出的部分将被裁切掉。
4. IE8 中依然不支持 border 的 transparent 值。
5. IE8 中 @import 只支持三层嵌套。

Update 08-3.12：

1. IE8 中 负数的text-indent 值会被裁切。
2. IE8 中依然存在 Fuzzy Specificity Bug。

1、应该将 CSS 放置于结构的上方（一般放置于 head 元素内）。CSS 是解释型语言，Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西。只有将 CSS 前置，才可在浏览器解析结构时，对页面进行渲染。

导致的问题就是，页面会有一段时间“朴素”，突然之间又“华丽”，用户体验很不好。

2、尽量使用 <link rel=”stylesheet” href=”http://www.planabc/yuanxin.css” type=”text/css”> 的样式导入方式，而减少 @import 的使用，更勿使用多层嵌套的 @import 。因为在 IE 里， @import 相当于将 <link> 放在页面尾部。

　　CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。

　　Specificity 计算规则：

• 元素的 style 样式属性，加 1,0,0,0。
• 每个 ID 选择符（#id），加 0,1,0,0。
• 每个 class 选择符（.class）、每个属性选择符（例 [attr=”"] ）、每个伪类（例 :hover），加 0,0,1,0。
• 每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。
• 其他选择符（例 全局选择符 *，子选择符 >），加 0,0,0,0。

最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比较。

除了 Specificity 还有一些其他规则：

• !important 声明的规则高于一切，如果 !important 声明冲突，则比较优先权。
• 如果优先权一样，则按源码中“后来者居上”的原则。
• 由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例 全局选择符 * ）。

　　今天看了aoao的blog，学到了这一招，和大家分享一下。

<!– /* window.onload=function(){ document.getElementById(“test2″).innerHTML=”传说中滴JS测试者。如果你看到我，那JS也生效了”; } <!– */ <!– #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}

　　在网上运行时还要通过程序输出个“*/*”的头，不然MIME不对有的浏览器不干活。PHP的是这样：

　　<?header(’Content-type: */*’);?>

　　理论上在服务器上指定某种后缀的MIME是“*/*”应用也行得通，不过我没有试。把JS跟CSS写在同一个文件特别适合第三方调用的那种，虽然文件大了一点，但能少了一半的请求数，帅帅滴。补充说明，直接这样使用会是两个200的，要节省还要涉及到服务器配置，最少我还不知道单程序可以实现的。

　　如果你有兴趣，那么复制代码。测试一下。怎么样？神吧！其实也没什么，只是充分利用了注释符。不过还真未曾想到还有此一招。佩服佩服！