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属性且属性值等于value的E1
	属性选择符(Attribute Selectors)		CSS2		NONE		E1[attr~=value]		选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等于value的E1
	属性选择符(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; width:120px; }

*.div { text-decoration:none; }

 

E 类型选择符

语法： E1

 

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

 

示例： 

td { font-size:14px; width: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; width: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.