选择符
选择符 |
CSS Version |
Compatibility |
Syntax Samples |
Description |
||||||
CSS1 |
IE4+ , NS4+ |
E1 |
以文档语言对象类型作为选择符 |
|||||||
CSS2 |
NONE |
* |
选定文档目录树(DOM)中的所有类型的单一对象 |
|||||||
CSS1 |
IE4+ , NS4+ |
E1 E2 |
选择所有被E1包含的E2。即E1.contains(E2)==true |
|||||||
CSS2 |
NONE |
E1 > E2 |
选择所有作为E1子对象的E2 |
|||||||
CSS2 |
NONE |
E1 + E2 |
选择紧贴在对象E1之后的所有E2对象 |
|||||||
CSS2 |
NONE |
E1[attr] |
选择具有attr属性的E1 |
|||||||
CSS2 |
NONE |
E1[attr=value] |
选择具有attr属性且属性值等于value的E1 |
|||||||
CSS2 |
NONE |
E1[attr~=value] |
选择具有attr属性且属性值为一用空格分隔的字词列表,其中一个等于value的E1 |
|||||||
CSS2 |
NONE |
E1[attr|=value] |
选择具有attr属性且属性值为一用连字符分隔的字词列表,由value开始的E1 |
|||||||
CSS1 |
IE4+ , NS4+ |
#sID |
以文档目录树(DOM)中作为对象的唯一标识符的ID作为选择 |
|||||||
CSS1 |
IE4+ , NS4+ |
E1.className |
在HTML中可以使用此种选择符。其效果等同于E1[class~=className] |
|||||||
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.