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 }
【相关文章】好搜一下
兼容标准XHTML的浮动层特效实现

兼容标准XHTML的浮动层特效实现

1. 浮动层的显示、移动一个简单的例子:div id="mydiv" style…