CSS语法结构由三部分组成:选择符(Selector),属性(property)和值(value).
使用方法: Selector { Property: value}
类型选择符
所谓类型选择符,是指网页中已有的标签类型作为名称的选择符
例如：body， div， span等
全局选择符
CSS全局选择符 -- 匹配文档中的任意一个元素
* { color: pink; font-size: 12px; border: 1px solid blue; }
统一定义页面的所有元素
群组选择符
除了可以对单个对象进行样式指定,还可以对一组对象进行相同的样式指派.只需要使用逗号对选择符进行分隔
例如：h1,h2,h3,span { font-family:宋体 }
包含选择符
当我们仅仅想对某一个对象中的子对象进行样式指定时,包含选择符就被派上了用场.包含选择符组合中前一个对象包含后一个对象,对象之间使用空格作为分隔符.
例如：h1 span{ font-weight:bold }
子对象选择符
包含选择符比子选择符范围更广，因包含关系中一个元素可以是另外一个元素的"儿子"、"孙子"、"从孙子"，而子对象选择符中的一个元素只能是另外一个元素的"儿子"，"孙子"或"从孙子"不行
例如
p > code { color:blue; font-size:120%; } <p> <code>梦之都CSS子对象选择符可用，蓝色</code> </p>
上面的例子可以显示p > code定义的样式.
<p>
<span><code>梦之都CSS子对象选择符不可用</code></span>
</p>
上面的例子不能显示p > code定义的样式,因为p与code不是直接包含关系，是间接包含关系（code是p的"孙子"）
直接相邻选择符
h1 + p { color:red; }
上面例子定义了直接相邻选择符
<h1>梦之都CSS 直接相邻选择符</h1>
<p>
使用了样式
</p>
由于p和h1是直接的邻居,所以p段落中的内容可以显示红色样式
普通相邻选择符
匹配文档中符合选择符规定的普通相邻关系的元素，例如E ~ F选择符，E和F在文档被相同的元素包含（具有相同的父元素）且文档中F在E后出现（无需紧随其后），则选择符匹配元素F
span ~ p { color:red; }
id选择符
每个id都是唯一的，不允许重复。因此一个ID选择符在一个HTML文档中只可使用一次
css中的格式：#id名{样式}
class选择符
类选择符可以包括HTML文档中不同类型的一些元素（就像一种分类），因此一个类选择符在一个HTML文档中可使用多次
css中的格式是：.class名{样式}
组合选择符
对于以上所有css选择符,均可以进行组合使用
如: .p1,#content,h1 .p2{ color:red } 表示class为p1,id为content,以及类型选择符h1标签下的所有class为p2的标签内字体的颜色为红色
伪类
CSS中样式和HTML文档中元素的连接通常基于元素在文档中的位置，这种方式满足于大部分需求。不过由于HTML文档结构的限制，一些效果无法实现，例如，某些用户行为引发的事件，下面是一些示例：
- 当用户鼠标移动到某个HTML元素上
- 离开HTML元素
- 点击HTML元素
伪类是一种特殊的类,它由CSS自动支持,属CSS的一种扩展类,名称不能被用户自定义,使用时只能够按标准格式进行应用
例如：
a: hover {
background-color:#000;
}
属性名选择符
[att] -- CSS属性名选择符，匹配文档中具有att属性的E元素
a[title] { color:red; border: 1px solid blue; }
所有具有title属性的a标签将显示红色的文字，并显示蓝色边框
属性值选择符[att=val]
[att=val] -- CSS E[att=val] 属性值选择符，匹配文档中具有att属性且其值为val的E元素
a[title="fwj"] { color:red; }
所有title值为fwj的a标签的文字颜色将显示红色
属性值选择符也可以匹配多个属性
*[title="fwj"][href="http://www.baidu.com/"] { color: pink; border: 1px solid blue; }
只有title为fwj和href为http://www.baidu.com/的标签，文字才显示粉色
属性值选择符E[att~=val]
E[att~=val] -- CSS E[att~=val] 属性值选择符，匹配文档中具有att属性且其中一个值（多个值使用空格分隔）为val(val不能包含空格)的E元素
a[title~="baidu"] { color:red; } <a href="http://www.baidu.com/" title="www baidu com">红色</a>
title属性包含三个值（多个值使用空格分隔），其中一个为baidu，因此可匹配样式
属性值选择符 E[att|=val]
E[att|=val] -- CSS E[att|=val] 属性值选择符，匹配文档中具有att属性且其中一个值为val，或者以val开头紧随其后的是连字符-的E元素（主要用来允许语言编码的匹配，例如HTML中的hreflang属性。关于lang（或 xml:lang）语言码的匹配，可查看:lang伪类）
*[lang|="en"] { color: red; } *[lang|="zh"] { color: blue; }
<p lang="en">梦之都红色</p>
<p lang="en-US">梦之都红色</p>
<p lang="zh">梦之都蓝色</p>
属性值子串选择符E[att^=val]
E[att^=val] -- CSS E[att^=val]属性值子串选择符，匹配文档中具有att属性且其值的前缀为val的E元素
a[href^="mailto"] { color: green; background: url(/images/css/icon-mail.png) center right no-repeat; } a[href^="https://"] { color:red; background: url(/images/css/icon-ssl.png) center right no-repeat; } a[href^="ftp://"] { color:gold; background: url(/images/css/icon-file.png) center right no-repeat; }
上面示例根据不同的链接协议匹配不同的样式图片
属性值子串选择符E[att$=val]
E[att$=val] -- CSS E[att$=val] 属性值子串选择符，匹配文档中具有att属性且其值的后缀为val的E元素
a[href$=".html"] { color:red; } a[href$=".php"] { color:green; } a[href$=".jsp"] { color:blue; }
为不同的链接文件匹配不同的样式
属性值子串选择符E[att*=val]
E[att*=val] -- CSS E[att*=val] 属性值子串选择符，匹配文档中具有att属性且其包含val的E元素
a[href*=".html"] { color:red; } a[href*=".php"] { color:green; } a[href*=".jsp"] { color:blue; } <a href="http://www.baidu.com/css.html?id=1&name=www">红色字体</a> <a href="http://www.baidu.com/css.php?id=2&name=dreamdu">绿色字体</a> <a href="http://www.baidu.com/css.jsp?id=3&name=com">蓝色字体</a>
由于多数动态网页的网址后都有参数，因此可以使用[att*=val]匹配动态网页的样式
