一、基础语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
h1 {color:red; font-size:14px;}
注意：
1、请使用花括号来包围声明
2、当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。
3、如果值为若干单词，则要给值加引号
4、如果要定义不止一个声明，则需要用分号将每个声明分开，称为声明分组
5、类上样式，id上行为。尽可能的用class，除非极特殊的情况可以用id。id是js用的。也就是说，js要通过id属性得到标签，所以css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。
二、高级语法
选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。
h1,h2,h3,h4,h5,h6 { color: green; }
继承
根据 CSS，子元素从父元素继承属性。
body { font-family: Verdana, sans-serif; }
根据上面这条规则，站点的 body 元素将使用 Verdana 字体。通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。
- 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
- 关于盒子、定位、布局的属性，都不能继承。
注意：
1、Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。
2、如果你不希望被所有的子元素继承，创建一个针对 子元素的特殊规则，这样它就会摆脱父元素的规则。
层叠性
层叠性：就是css处理冲突的能力。所有的权重计算，没有任何兼容问题！
当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
- id 选择器
- 类选择器、属性选择器、伪类选择器
- 标签选择器、伪元素选择器
对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器
层叠性举例
举例1：计算权重，
统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。（不进位，实际上能进位（255个标签，等于1个类名）但是没有实战意义！）
举例2：权重相同时
可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。
举例3：具有实战性的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul { color: blue; } .spe { color: red; } </style> </head> <body> <ul> <li class="spe">文字</li> <li>文字</li> <li>文字</li> <li>文字</li> <li>文字</li> </ul> </body> </html>
权重总结：
提高权重
font-size:60px !important;
1）!important提升的是一个属性，而不是一个选择器
2）!important无法提升继承的权重，该是0还是0
3）!important不影响就近原则
同一个标签，携带了多个类名，有冲突：
- 对同一个标签，如果用到了多个相同的内嵌样式表，它的优先级：定义的样式表中，谁最近，就用谁。
- 对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
三、选择器
IE6层面兼容的选择器： 标签选择器、id选择器、类选择器、后代、交集选择器、并集选择器、通配符。如下：
```
p
#box
.spec
div p
div.spec
div,p
*
```
IE7能够兼容的：儿子选择器、下一个兄弟选择器。如下：
```
div>p
h3+p
```
IE8能够兼容的：
```
ul li:first-child
ul li:last-child
```
1、元素选择器（类型选择器）
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;} h1 {color:blue;} h2 {color:silver;}
2、派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。
比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
li strong { font-style: italic; font-weight: normal; }
3、id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;} #green {color:green;}
在现代布局中，id 选择器常常用于建立派生选择器。
#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; }
特别地定义这个选择器所属的元素
div#sidebar { border: 1px dotted #000; padding: 10px; }
注意：
1、ID 选择器使用一次，而且仅一次。
2、ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
3、可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。
4、类选择器
在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}
和 id 一样，class 也可被用作派生选择器：
.fancy td { color: #f60; background: #666; }
元素也可以基于它们的类而被选择，类选择器结合元素选择器来使用：
td.fancy { color: #f60; background: #666; }
多类选择器，在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：
<p class="important warning">
This paragraph is a very important warning.
</p>
假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：
.important {font-weight:bold;} .warning {font-style:italic;} .important.warning {background:silver;}
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：
.important.urgent {background:silver;}
注意：
1、类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
2、在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。
3、可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。
5、属性选择器
对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
下面的例子为带有 title 属性的所有元素设置样式：
[title] { color:red; }
下面的例子为 title="W3School" 的所有元素设置样式：
[title=W3School] { border:5px solid blue; }
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; }
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
| 选择器 | 描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素。 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
注意：
1、只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
6、通配符选择器
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
例如，下面的规则可以使文档中的每个元素都为红色：
* {color:red;}
7、后代选择器
定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}
8、子元素选择器
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
9、相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
10、伪类
同一个标签，根据其不同的状态，有不同的样式。比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做伪类。
伪类的语法：
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
伪类可以与 CSS 类配合使用：
a.red : visited {color: #FF0000} <a class="red" href="css_syntax.asp">CSS Syntax</a>
锚伪类：在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */
注意：
1、a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
2、a:active 必须被置于 a:hover 之后，才是有效的。
3、伪类名称对大小写不敏感。
| 属性 | 描述 | CSS |
|---|---|---|
| :active | 向被激活的元素添加样式。 | 1 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | 1 |
| :link | 向未被访问的链接添加样式。 | 1 |
| :visited | 向已被访问的链接添加样式。 | 1 |
| :first-child | 向元素的第一个子元素添加样式。 | 2 |
| :lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
a{}和a:link{}的区别：
- `a{}`定义的样式针对所有的超链接(包括锚点)
- `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
11、伪元素
伪元素的语法：
selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用：
selector.class:pseudo-element {property:value;}
"first-line" 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：
p:first-line { color:#ff0000; font-variant:small-caps; }
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
p:first-letter { color:#ff0000; font-size:xx-large; }
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1> 元素前面插入一幅图片：
h1:before { content:url(logo.gif); }
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片：
h1:after { content:url(logo.gif); }
| 属性 | 描述 | CSS |
|---|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
| :first-line | 向文本的首行添加特殊样式。 | 1 |
| :before | 在元素之前添加内容。 | 2 |
| :after | 在元素之后添加内容。 | 2 |
12、其他选择器
nth-child(number)
直接匹配第number个元素。参数number必须为大于0的整数。
:first-child
获取第一个
:not(:first-child)
获取除第一个
:nth-child(n+2)
其中nth-child表示第几个son，n+2表示从第二个开始(即所有的n都是取从0开始的自然数)
:nth-last-child(n+2)
获取除最后一个div中所有的div
:last-child
获取最后一个
:nth-child(an)
匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。
nth-child(odd)
奇数匹配
nth-child(even)
偶数匹配