Macji Pro²⁰¹⁰

我觉得他很好用，尤其是在博客评论的时候，当你点击评论链接到目标评论（锚点，目标评论段落），由于页面过短，往往不能准确的显示锚点内容。而它解决这一问题。

它在CSS3规范中引入这个伪类，目前已经在Firefox，Safari等浏览器得到支持。但遗憾的是没有在IE中得到支持，但这可以用javascript来处理它。

比如在我这个博客的评论(如果是Firefox等浏览器，它将展示)，链接目标评论段落背景颜色为

#fff8e2

，css这么写

.comment-list li:target,.comment-list li.target{
	border:2px dotted #fc3!important;
	background-color:#fff8e2!important;
}

.target是给不支持该属性的浏览器用，用javascript来解析URL中的#后面的值，然后给他添加className。

扩展阅读：

• http://www.htmldog.com/articles/suckerfish/target/
• http://www.w3.org/TR/css3-selectors/#target-pseudo

如果你接触过IE8的WebSlice，那么你对他并不陌生。hatom是microformats的一部分，但现在还不是一个开放的标准，还是一个草案。

hAtom is a microformat for content that can be syndicated, primarily but not exclusively weblog postings. hAtom is based on a subset of the Atom syndication format. hAtom will be one of several microformats open standards.

你可以使用Firebug查看我的源代码，就是一套命名规则（hslice完全是为了IE8的WebSlice，你可以用ie8来浏览我的博客）。你可以收藏我博客中你喜欢的文章。

其实google的Blogger已经在使用它了。如果你也想让用户可以收藏你网页中的某一块东西，那么你就使用它(比RSS更灵活)。

我一直呼吁尊重浏览器，少用hack，可是为解决IE特殊情况，难免要用到一点点hack。我们在动态添加CSS，习惯在head里添加一个style元素，在这元素里增加css内容。

var addCSS = function(cssText, doc) {
		doc = doc || document;
		var styleEl = doc.createElement("style");
		styleEl.type = "text/css";
		if (styleEl.styleSheet) {
			styleEl.styleSheet.cssText = cssText;
		} else {
			styleEl.appendChild(doc.createTextNode(cssText));
		}
		doc.getElementsByTagName("head")[0].appendChild(styleEl);
	}

虽然这样写没有错，可是我们的IE在这种情况下，不认hack和important，也就是说IE会忽略所有无关的字符（_color:#fff; !@#$%^&colo:000;r），非要增加一个hack，我们只能通过判断浏览器是否是IE，然后给IE增加特定的CSS。

换一种思路，假如我们直接给CSS样式表增加CSS呢？try

var addCSS = function(selector, cssText) {
	var styles = document.styleSheets[0];//获取css样式表
	var rules = styles.cssRules || styles.rules;
	if (styles.insertRule)//W3C方式
		styles.insertRule(selector + "{" + cssText + "}", rules.length);
	else if(styles.addRule)//IE方式
		styles.addRule(selector, cssText, rules.length);
}

//假如我们已经有一个H1
(function() {
    var _css = "{color:#f60!important; color:#000; _color:#369;}";
	addCSS("h1", _css);
})();

YES，就这么简单，你可能觉得这样写不好，是，我们最需要的是权衡。

update:先创建，再添加就可以了。by 秦歌

var addCSS = function(cssText, doc) {
		doc = doc || document;
		var styleEl = doc.createElement("style");
		styleEl.type = "text/css";
        doc.getElementsByTagName("head")[0].appendChild(styleEl);//选创建
		if (styleEl.styleSheet) {//再添加css规则
			styleEl.styleSheet.cssText = cssText;
		} else {
			styleEl.appendChild(doc.createTextNode(cssText));
		}
	}