• WEB标准学习路程之"CSS":9.常用选择符


     

    选择符

    选择符

    CSS Version
    版本

    Compatibility
    兼容性

    Syntax Samples
    语法

    Description
    简介

    类型选择符(Type Selectors)

    CSS1

    IE4+ , NS4+

    E1

    以文档语言对象类型作为选择符

    通配选择符(Universal Selector)

    CSS2

    NONE

    *

    选定文档目录树(DOM)中的所有类型的单一对象

    包含选择符(Descendant Selectors)

    CSS1

    IE4+ , NS4+

    E1 E2

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

    子对象选择符(Child Selectors)

    CSS2

    NONE

    E1 > E2

    选择所有作为E1子对象的E2

    相邻选择符(Adjacent Sibling Selectors)

    CSS2

    NONE

    E1 + E2

    选择紧贴在对象E1之后的所有E2对象

    属性选择符(Attribute Selectors)

    CSS2

    NONE

    E1[attr]

    选择具有attr属性的E1

    属性选择符(Attribute Selectors)

    CSS2

    NONE

    E1[attr=value]

    选择具有attr属性且属性值等于valueE1

    属性选择符(Attribute Selectors)

    CSS2

    NONE

    E1[attr~=value]

    选择具有attr属性且属性值为一用空格分隔的字词列表,其中一个等于valueE1

    属性选择符(Attribute Selectors)

    CSS2

    NONE

    E1[attr|=value]

    选择具有attr属性且属性值为一用连字符分隔的字词列表,由value开始的E1

    ID选择符(ID Selectors)

    CSS1

    IE4+ , NS4+

    #sID

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

    类选择符(Class Selectors)

    CSS1

    IE4+ , NS4+

    E1.className

    HTML中可以使用此种选择符。其效果等同于E1[class~=className]

    选择符分组(Grouping)

    CSS1

    IE4+ , NS4+

    E1,E2,E3

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

    通配选择符

    语法: *

     

    说明: 

    选定文档目录树(DOM)中的所有类型的单一对象。

    假如通配选择符不是单一选择符中的唯一组成,*可以省略。

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

     

    示例: 

    *{ text-decoration:none; }//所有可见元素都会继承此样式.

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

    *.div { text-decoration:none; }

     

    E 类型选择符

    语法: E1

     

    说明: 以文档语言对象类型作为选择符。

     

    示例: 

    td { font-size:14px; 120px; }

    a { text-decoration:none; }

     

    属性选择符

    语法: 

    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对象 */ 

    a[target="_blank"]{ background:url('....') }

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

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

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

    补:

    [att^=val] //如果att这个属性开头包含val这个值就使用这个样式.

    [att*=val] //如果att这个属性任意处包含val这个值就使用这个样式.

    [att$=val] //如果att这个属性结尾包含val这个值就使用这个样式.

    :a[href$=".zip"]{ background:url('....') } //结尾是.zip则采用此样式

    包含选择符(后代选择符)

    语法: E1 E2

     

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

     

    示例: 

    table td { font-size:14px; } 

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

    #div1 div2{ ID为div2的样式 }

     

    子对象选择符

    语法: E1 > E2

     

    说明: 

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

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

     

    示例: 

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

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

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

     

    E+F 相邻选择符(往下"相邻一个"起作用)

    #pTest5+p{ text-decoration:underline; }

    <p id="pTest4">this p4</p>

    <p id="pTest5">this p5</p>

    <p id="pTest6">this p6</p>   //只有这个起作用

    <p id="pTest7">this p7</p>

    ID选择符

    语法: #sID

     

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

     

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

     

    CLASS 类选择符

    语法: 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 */

    选择符分组

    语法: E1,E2,E3

     

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

     

    示例: 

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

    ID,CLASS选择符的区别是,ID选择符是唯一的但是CLASS可以产生很多了.

    子对象选择符和包含选择符的区别是,子对象选择符只对了对象起作用而不对其子子对象起作用.而包含选择符对其所有子对象都起作用

     

    选择符的优先级*:Element:class:id:style ——   0:1:10:100:1000 通配符,元素,类,ID,内联

    div.div2_class{ color:red; }//1+10

    body div #div2_class{ color:green; }//1+1+100

    如果优先级一样,后面的会冲掉前面的样式.

     

    一些特殊的规则

    !important的声明优先级高于一切

    !important

    语法 sRule!important 

    说明 sRules :  样式表条目 提升指定样式规则的应用优先权。 

    示例div { color:red!important }

    优先级一样的遵从就近原则(样式位置就近和血缘就近)

    全局选择符优先级、子选择符和继承样式优先级最低 特殊性值可以认为是0.

     

     

  • 相关阅读:
    上下文相关协议的学习
    正则模块学习
    Delphi 10.2.3 + Xcode 9.2 开发 IOS 程序,免证书+免越狱,真机调试
    Delphi X10.2 + FireDAC 使用 SQL 语句 UPDATE
    Delphi X10.2 + FireDAC 使用 SQL 语句 INSERT
    Png 图像缩放保持 Alpha 通道
    delphi 10.1 Berlin 中使用自带的 Base64 编码
    delphi 10.1 Berlin 中使用自带的 MD5 校验
    完成 bass 库的频谱显示效果图
    Ubuntu 12.04 LTS 安裝无线网卡驱动
  • 原文地址:https://www.cnblogs.com/astar/p/1227332.html
Copyright © 2020-2023  润新知