GOVO’s Blog

CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。

语法：

:nth-child(an+b)

为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和Safari3+。

描述：

伪类:nth-child()的参数是an+b，如果按照w3.org上的描述，写成中文，很可能会让人头晕，再加上笔者的文笔水平有限，所以我决定避开an+b的说法，把它拆分成5种写法共5部分来说明。

第一种：简单数字序号写法

:nth-child(number)

直接匹配第number个元素。参数number必须为大于0的整数。 阅读全文(Read the rest of this entry) »

Popularity: 60% [?]

关于CSS选择器优先级，目前国内已有很多人进行过解释，但感觉不如人意，特别对于初学者，更是难以理解。这里我把W3C上所描述的规范以我的理解再解释一下，希望能给大家提供到帮助。

在Calculating a selector’s specificity上的原文摘选如下：
(相信很多人更喜欢看原文)

A selector’s specificity is calculated as follows:

• count 1 if the declaration is from is a ’style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
• count the number of ID attributes in the selector (= b)
• count the number of other attributes and pseudo-classes in the selector (= c)
• count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form “[id=p33]” is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an “ID” in the source document’s DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

  selector( a , b , c , d )
   compare: ↑ , ↑ , ↑ , ↑
  selector( a , b , c , d )

 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0 , 0 , 2 , 1  */
       /*compare                                       ↑ , ↑ , √      */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0 , 0 , 1 , 1  */
       /*compare                                       ↑ , ↑ , ↑ , √  */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0 , 0 , 1 , 3  */
       /*compare                                       ↑ , ↑ , √      */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0 , 1 , 0 , 0  */
       /*compare                                       ↑ , √          */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1 , 0 , 0 , 0  */

注意，这四组数值分别对应于不同类型的选择器，互不影响，根据读法法则进行比较。

(这里没有讨论到!important，就近原则和继承，也没有实例代码，欢迎大家共同讨论！）

参考：

[1] CSS优先级问题

[2]Calculating a selector’s specificity

Popularity: 49% [?]

做了几天的一个专题，分析了CSS清除浮动的要点和方法，对成因和结果进行归纳总结，以及如何避免在IE中偶尔遇到的一些不可思议的问题，其实是一个自我学习的过程，请大家给意见，谢谢！

点击链接进入专题：

CSS清除浮动专题

Popularity: 51% [?]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

/*
* Get the class string from the object
* @param object o the DOM object 
* @return string the class string of the object
*/
//var getClass=function(o){
var getClassName=function(o){
	return o.className;
}
/*
* Set the class string from the object
* @param string cls the class string to be set
* @param object o the DOM object where
* the class string to be set to
*/
//var setClass=function(o){
var setClassName=function(cls,o){
	o.className=cls;
}
/*
* Parse the classes list to array by split(" ")
* @param string cl a string of class or a list of classes
* @return array with the element of class name
*/
var getClassArray=function(cl){
	if(cl && typeof(cl)=="string")
	return cl.split(" ");
	else return cl;
}
/*
* If the class is listed in the classes list ,return true
* @param string cl a single class name 
* @param string cls class name list
* @return true if the class is listed 
* in the classes list.else return false.
*/
var matchClass=function(cl,cls){
	if(!cls) return false;
	cls= getClassArray(cls);
	for(var c in cls) if(cl==cls[c]) return true;
	return cl==cls;
}
/*
* remove one of the classes from the object
* @param string cl a single class name 
* @param string cls class name list
*/
var removeClass=function(cl,o){
	var cls=getClassArray(getClassName(o));
	var _cls="";
	for(var i in cls) if (cl!=cls[i]) _cls+=" "+cls[i];
	setClassName(_cls,o);
}
/*
* add a class to the object
* @param string cl a single class name 
* @param object o the DOM object
* where the class string to be ADD to
*/
var addClass=function(cl,o){
	removeClass(cl,o);
	setClassName(getClassName(o)+" "+cl,o);
}

　　上面几个函数，相信很多人早就写过不少，在这里我仅为总结一下经验，也希望有点价值。
　　通常，在xhtml中标签改变class的值，只要

obj.className=stringValue

　　这是对付简单的情况。当一个元素中已经有多个class时，一个简单的obj.className=stringValue就无能为力了。 阅读全文(Read the rest of this entry) »

Popularity: 51% [?]