CSS2.0基础知识--选择符

2008-05-13 17:17:02
CSS中的选择符
Selectors
选择符
CSS Version
版本
Compatibility
兼容性
Syntax Samples
语法
Description
简介
类型选择符(Type Selectors)CSS1IE4+ , NS4+E1以文档语言对象类型作为选择符
通配选择符(Universal Selector)CSS2NONE*选定文档目录树(DOM)中的所有类型的单一对象
包含选择符(Descendant Selectors)CSS1IE4+ , NS4+E1 E2选择所有被E1包含的E2。即E1.contains(E2)==true
子对象选择符(Child Selectors)CSS2NONEE1 > E2选择所有作为E1子对象的E2
相邻选择符(Adjacent Sibling Selectors)CSS2NONEE1 + E2选择紧贴在对象E1之后的所有E2对象
属性选择符(Attribute Selectors)CSS2NONEE1[attr]选择具有attr属性的E1
属性选择符(Attribute Selectors)CSS2NONEE1[attr=value]选择具有attr属性且属性值等于value的E1
属性选择符(Attribute Selectors)CSS2NONEE1[attr~=value]选择具有attr属性且属性值为一用空格分隔的字词列表,其中一个等于value的E1
属性选择符(Attribute Selectors)CSS2NONEE1[attr|=value]选择具有attr属性且属性值为一用连字符分隔的字词列表,由value开始的E1
ID选择符(ID Selectors)CSS1IE4+ , NS4+#sID以文档目录树(DOM)中作为对象的唯一标识符的ID作为选择
类选择符(Class Selectors)CSS1IE4+ , NS4+E1.className在HTML中可以使用此种选择符。其效果等同于E1[class~=className]
选择符分组(Grouping)CSS1IE4+ , NS4+E1,E2,E3将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式并为组

选择符分组(Grouping)

语法:
E1,E2,E3

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

示例:

.td1,div a,body { font-size:14px; }

类选择符(Class Selectors)

语法:
 
E1.className

说明: 

在HTML中可以使用此种选择符。其效果等同于E1[class~=className]。请参阅属性选择符( Attribute Selectors)。
在IE5+,可以为对象的class属性(特性)指定多于一个值(className),其方法是指定用空格隔开的一组样式表的类名。 

示例:

div.note { font-size:14px; }

/* 所有class属性值等于(包含)"note"的div对象字体尺寸为14px */

.dream { font-size:14px; }

/* 所有class属性值等于(包含)"note"的对象字体尺寸为14px */

ID选择符(ID Selectors)

语法:

#sID

说明:

以文档目录树(DOM)中作为对象的唯一标识符的ID作为选择符。

示例: 

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

属性选择符(Attribute Selectors)

语法:

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

说明:
目前IE5.5+ IE6尚不支持此种选择符。

示例:

h[title] { color: blue; }
/* 所有具有title属性的h对象 */

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

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

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

相邻选择符(Adjacent Sibling Selectors)

说明:

选择紧贴在对象E1之后的所有E2对象。E2和E1对象在文档目录结构树(DOM)中有共同的父对象。
目前IE5.5+尚不支持此种选择符。 

语法:

E1 + E2

示例:

div + p { font-size:14px; }

/* 所有紧贴在div对象之后的p对象的字体尺寸为14px */

div.fly + p { font-size:14px; }

子对象选择符(Child Selectors)

说明: 

选择所有作为E1子对象的E2。
目前IE5.5+ IE6.0尚不支持此种选择符。

语法:

E1 > E2

示例:

body > p { font-size:14px; }

/* 所有作为body的子对象的p对象字体尺寸为14px */

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

包含选择符(Descendant Selectors)

说明:

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

语法:

E1 E2

示例:

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

通配选择符(Universal Selector)

说明: 

选定文档目录树(DOM)中的所有类型的单一对象。
假如通配选择符不是单一选择符中的唯一组成,“*”可以省略。
目前IE5.5+尚不支持此种选择符。

语法:

*

示例:

*{margin:0;padding:0;}
*[lang=fr] { font-size:14px; width:120px; }
*.div { text-decoration:none; }

类型选择符 ( Type Selectors )

说明:
以文档语言对象类型作为选择符。即以HTML标签(或叫做标记、tag)作为选择符。

语法:
E1

示例:

td { font-size:14px; width:120px; }
a { text-decoration:none; }

 

上一篇:Css2快速参考(五)
下一篇:针对初学者的XHTML基础(一)

有什么想说的吗?