CSS学习总结系列2——CSS组成

CSS组成：

1. 规则：选择符+声明块
2. 注释：/**/

规则：选择符+声明块

CSS规则由选择符（Selector）和由声明（Declaration）组成的声明块组成，其中声明包括属性（Property）和属性值（Value）。每个声明之后要用分号结尾。

标准浏览器对选择符的支持很全面，只讨论IE浏览器对选择符的支持。

IE浏览器对选择符的支持表：

选择符	CSS版本	IE兼容性	语法	说明
类型选择符（Type Selector）	CSS1	IE4+	e1	与文档中一个元素名匹配
通配选择符（Universal Selector）	CSS2	IE4+	*	与文档中所有元素名匹配
ID选择符（ID Selectors）	CSS1	IE4+	#idname	与文档中元素的id属性匹配
class选择符（Class Selectors）	CSS1	IE4+	.classname	与文档中元素的class属性匹配
包含选择符（Descendant Selectors）	CSS2	IE7	e1 e2	选择所有后代
子选择符（Child Selectors）	CSS2	IE7	e1>e2	选择所有子代
相邻选择符（Adjacent Sibling Selectors）	CSS2	IE7	e1+e2	选择所有兄弟元素
简单属性选择符（Simple Attribute Selector）	CSS2	IE7	[ property ]	根据属性的存在来选择元素
具体属性选择符（Exact Attribute Value Selector）	CSS2	IE7	[ property =“value” ]	根据属性的具体值选择元素
部分属性选择符（Partial Attribute Value Selector）	CSS2	IE7	[ property~=“value”]	根据属性值中的一部分选择元素（属性值用空格分隔）
特定属性选择符（A Particular Attribute Selection Type）	CSS2	IE7	[ property |=“value”]	根据属性值的最前面选择元素（属性值用连字号分隔）
开始子串属性选择符（Beginning Substring Attribute Value Selector）	CSS3	IE7	[ property^=“value”]	根据属性值开始的字串选择元素
结束子串属性选择符（Ending Substring Attribute Value Selector）	CSS3	IE7	[ property$=“value”]	根据属性值最后面的字串选择元素
任意子串属性选择符（Arbitrary Substring Attribute Value Selector ）	CSS3	IE7	[ property*=“value”]	根据属性值中任意位置上的字串选择元素
多类选择符	CSS2	IE7	.class1.class2	选择同时包含这些类名的元素
选择符分组	CSS1	IE4+	e1,e2,e3	对不同的选择符选定的元素应用相同的样式

IE4-IE6实现的选择符

简单选择符

1. 类型选择符（Type Selectors）（CSS1）
2. 通配选择符（Universal Selector）（CSS2）
3. ID选择符（ID Selectors）（CSS1)
4. class选择符（Class Selectors）（CSS1）

复合选择符

1. 包含选择符（Descendant Selectors）（CSS1）

语法：E1 E2 { sRules }

含义：选择所有被 E1 包含的 E2 。用于选择一个元素的所有后代。

2. 选择符分组（Grouping）（CSS1)

语法：E1 , E2 , E3 { sRules }

IE7新支持的两个复合选择符

1. 子选择符（Child Selectors）（CSS2）

语法：E1 > E2 { sRules }

含义：选择所有作为 E1 子对象的 E2。选择一个元素的直接后代。

2. 相邻选择符（Adjacent Sibling Selectors）（CSS2)

语法：E1 + E2 { sRules }

含义：选择紧贴在 E1 之后的所有 E2 。 E1 和 E2 在文档目录结构树(DOM)中有共同的父对象。

仅IE7识别*+html组合。

IE7对多类选择符提供了更好的支持

语法： .c1.c2{sRules}

含义：通过把几个个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限制）。

IE7全面支持CSS2.1属性选择符（Attribute Selectors），还包括一些CSS3属性选择符。

1. 简单属性选择符（Simple Attribute Selector）（CSS2）

语法：[ property ] { sRules }

含义：选择具有property 属性的元素。

2. 具体属性选择符（Exact Attribute Value Selector）（CSS2）

语法：[ property =“value” ] { sRules }

含义：选择具有 property 属性且属性值等于“value”的元素。

3. 部分属性选择符（Partial Attribute Value Selector）（CSS2）

语法：[ property ~=“value”] { sRules }

含义：选择具有 property属性且属性值为用空格分隔的字词列表，其中一个等于 “value”的 元素 。这里的 “value” 不能包含空格。

4. 特定属性选择符（A Particular Attribute Selection Type）（CSS2）

语法：[ property |= “value”] { sRules }

含义： 选择具有property属性且属性值为用连字符分隔的字词列表，由“value”开始的元素，即属性值为”value”或”value-”的所有元素。

语言属性选择符：[lang|="value"]是其中的一个典型的应用。

IE7支持的CSS3属性选择符。

1. 开始子串属性选择符（Beginning Substring Attribute Value Selector）

语法：[ property ^= “value” ] { sRules }

含义：选择property属性值以“value”开头的所有元素。

2. 结束子串属性选择符（Ending Substring Attribute Value Selector）

语法：[ property $= “value” ] { sRules }

含义：选择property属性值以“value”结尾的所有元素。

3. 任意子串属性选择符（Arbitrary Substring Attribute Value Selector ）

语法：[ property*= “value” ] { sRules }

含义：选择property属性值中包含子串“value”的所有元素。

伪类(Pseudo-classes)选择符

IE7开始支持:first-child 伪类和结合伪类；IE3开始支持超链接伪类；IE4开始支持动态伪类中的:hover, :active应用于链接元素；IE7开始支持对所有元素都能应用:hover,但是不支持对表单元素应用:focus样式。

1. :first-child 伪类

将特殊的样式添加到作为其他元素的第一个子元素。

2. :link and :visited 超链接伪类

:link 伪类：将特殊的样式添加到未被访问过的链接。

:visited 伪类将特殊的样式添加到被访问过的链接。

3. :hover, :active, and :focus 动态伪类

:hover 伪类：当鼠标悬浮在元素上方时，向元素添加样式。

:active 伪类：将样式添加到被用户输入激活的元素。

:focus 伪类：将样式添加到当前拥有输入焦点的元素。

4. :lang 伪类

:lang 伪类允许创作者来定义指定的元素中使用的语言。例：:lang(en){...}

5. 结合伪类

在CSS2.1中，可以在一个选择器中结合使用伪类。例如a:link:hover{...}。

伪元素(Pseudo-elements)选择符

CSS2.1中定义了4个伪元素，为文档中假设存在的内容的样式或插入生成内容。所有为元素都必须放在出现改为元素的选择器的最后面。

IE5开始支持first-letter 和first-line 伪元素。IE不支持CSS中生成内容的部分，所以无法在IE中使用:befor和:after伪元素。关于CC的生成内容的部分，整理在CSS属性中。

1. :first-letter 伪元素：设置首字母样式。

在 CSS2.1 之前，:first-letter 只能与块级元素关联。CSS2.1 扩大了这个范围，可以与任何元素关联。可以应用到首字母的属性是有限的。

:first-letter 伪元素允许的属性：

font 属性 color 属性 background 属性 margin 属性 padding 属性 border 属性 text-decoration vertical-align (仅当float为none时) text-transform line-height float letter-spacing(CSS2.1中新增) word-spacing(CSS2.1中新增) clear(CSS2.1中已经去除) text-shadow(CSS2.1中已经去除)

2. :first-line 伪元素：设置第一行的样式。 :first-line 伪元素允许的属性：

font 属性 color 属性 background 属性 word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear (CSS2.1中已经去除) text-shadow(CSS2.1中已经去除)

3. :before and :after伪元素:在元素内容之前或之后插入内容。生成的伪元素默认为行内元素。可以通过display改变这一点。

例如：a[href]:before{content: "(link)";} ，a[href]:before{content: url(img.gif);}

声明块

• 声明块包含一个或多个声明。
• 属性的取值可能是一个或多个。
• 属性值往往由空格分隔，只有一种情况例外，在CSS的font属性中，行高属性在字体属性的后面用“/”号分隔。

注释

• CSS注释可以跨多行，不能嵌套。