CSS选择器

      最近看了一下mootools，发现现在dom对象的选择几乎都是通过CSS选择器来在dom对象中导航的，CSS虽然一直在用，但是关于选择器部分了解的不是特别全面，顺便再重新复习一下：

 

通配选择符 Universal Selectors

语法：*

示例：*[lang=fr]{font-size:14px; width:120px;}   

         *.className{text-decoration:none}

 

类型选择符 Type Selectors

语法：E1

说明：没啥说的，就是HTML对象类型作为选择符

示例：a{text-decoration:none;}

     

属性选择符 Attribute Selectors

语法：1.E1[attr]

         2.E1[attr=value]

         3.E1[attr~=value]

         4.E1[attr|=value]

说明：1.选择具有attr属性的E1

         2.选择具有attr属性且属性值等于value的E1

         3.选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等于value的E1。这里的value不能包含空格
         4.选择具有attr属性且属性值为一用连字符分隔的字词列表，由value开始的E1

示例：h[title]{color:blue;}

         span[class=demo]{color:red;}

         div[speed="fast"][dorun="no"]{color:red;}

         a[rel~="copyright"]{color:black;}

 

包含选择符 Descendant Selectors

语法：E1 E2

说明：选择所有被E1包含的E2。即E1.contains(E2)==true

示例：table td{font-size:14px;}

         div.sub a { font-size:14px;}

 

子对象选择符 Child Selectors

语法：E1 > E2

说明：选择所有作为E1子对象的E2。

示例：body > p{font-size:12px;}

         div ul>li p { font-size:14px;}

 

ID选择符 ID Selectors

语法：#sID

说明：以DOM中作为对象的唯一标识符的ID作为选择符

示例：#note{font-size:14px; width:120px;}

 

类选择符 Class Selectors

语法：E1.className

说明：在HTML中可以使用此种选择符。其效果等同于E1[class~=className]。请参阅属性选择符

         在IE5+，可以为对象的class属性（特性）指定多于一个值(className)，其方法是指定用空格隔开的一组样式表的类名。
示例：div.note { font-size:14px; } /* 所有class属性值等于（包含）"note"的div对象字体尺寸为14px */ 
         .dream { font-size:14px; }/* 所有class属性值等于（包含）"note"的对象字体尺寸为14px */

选择符分组 Grouping

语法：E1, E2, E3

说明：将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。

示例：.td1, div a, body{font-size:12px;}