CSS2学习笔记(五) 2006-05-01
来源:本站原创 作者:开拓者
摘要:1、Universal Selector通配选择符: * 说明:选定文档目录树(DOM)中的所有类型的单一对象。假如通配选择符不是单一选择符中的唯一组成,“*”可以省略。目前IE5.5+尚不支持此种选择符。示例: *[lang=fr] f……
1、Universal Selector 通配选择符
- : *
说明:选定文档目录树(DOM)中的所有类型的单一对象。假如通配选择符不是单一选择符中的唯一组成,“*”可以省略。目前IE5.5+尚不支持此种选择符。
示例:
*[lang=fr] { font-size:14px; width:120px; }
*.div { text-decoration:none; }
2、Type Selectors 类型选择符
- :E1
说明:以文档语言对象类型作为选择符。
示例:
td { font-size:14px; width:120px; }
a { text-decoration:none; }
3、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
目前IE5.5+尚不支持此种选择符。
示例:
h[title] { color: blue; } /* 所有具有title属性的h对象 */
span[class=demo] { color: red; }
div[speed="fast"][dorun="no"] { color: red; }
a[rel~="copyright"] { color:black; }
4、Descendant Selectors 包含选择符
- :E1 E2 说明:选择所有被E1包含的E2。即E1.contains(E2)==true。
示例:
table td { font-size:14px; }
div.sub a { font-size:14px; }
5、Child Selectors 子对象选择符
- :E1 > E2
说明:选择所有作为E1子对象的E2。目前IE5.5+尚不支持此种选择符。
示例:
body > p { font-size:14px; } /* 所有作为body的子对象的p对象字体尺寸为14px */
div ul>li p { font-size:14px; }
6、ID Selectors ID选择符
- :#sID
说明:以文档目录树(DOM)中作为对象的唯一标识符的ID作为选择符。
示例: #note { font-size:14px; width:120px;}
7、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 */
8、Grouping 选择符分组
- :E1,E2,E3
说明:将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式并为组。
示例:
.td1,div a,body { font-size:14px; }
9、@import 版本:CSS1/CSS2 兼容性:IE4+
- :@import url (url) sMedia ;
说明:
url : 使用绝对或相对地址指定导入的外部样式表文件。请参阅link对象
sMedia : 指定设备类型。请参阅附录:设备类型。目前IE5.5尚不支持此属性
指定导入的外部样式表及目标设备类型。
该规则必须在样式表头部最先声明。并且其后的分号是必需的,如果省略了此分号,外部样式表将无法正确导入,并会生成错误信息。
用此规则导入的样式表,其owningElement特性是一个link对象或style对象。请参阅我的其他著作。
导入的外部样式表中的定义将被文当中的同名定义覆盖。
示例:
@import url("foo.css") screen, print;
@import "print.css"
10、@media 版本:CSS2 兼容性:IE5+
- :@media sMedia { sRules }
说明:
sMedia : 指定设备名称。请参阅附录:设备类型
sRules : 样式表定义
指定样式表规则用于指定的设备类型。请参阅link对象的media属性(特性)。
示例:
// 设置显示器用字体尺寸
@media screen {
BODY {font-size:12pt; }
}
// 设置打印机用字体尺寸
@media print {
@import "print.css"
BODY {font-size:8pt;}
}
11、:first-letter 版本:CSS2 兼容性:IE5.5+
- :Selector : first-letter { sRules }
说明:设置对象内的第一个字符的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
在此伪类中配合使用font-size属性和float属性可以制作首字下沉效果。
示例:
p a:first-letter { color: green }
div:first-letter { color:red;font-size:16px;float:left; }
12、:first-line 版本:CSS2 兼容性:IE5.5+
- :Selector : first-line { sRules }
说明:设置对象内的第一行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
如果未强制指定对象的width属性, 首行的内容长度可能不是固定的。
示例:
p a:first-line { color: green }
div:first-line { color:red;font-size:16px; }
13、!important 版本:CSS1 兼容性:IE4+
- :sRule!important
说明:
sRules : 样式表条目
提升指定样式规则的应用优先权。
示例:
div { color:red!important }