1、css3的基本规则
css主要是由两种部分组成：选择器（selector）和声明（declarations）；
选择器：英文（selector），是开发者选择要修改样式的元素。
声明：英文（declarations），是开发者制定修改元素的规则，声明由属性和值组成。
属性：英文（property），是开发者希望设置的样式属性。
值：应为（value）,是属性的具体内容。
属性和值之间使用冒号（:）分开，声明和声明之间使用分号（;）分开。
声明需要用花括号包（{ }）起来。
css中的注释开头为（/*）结束为（*/）。
2、css3的选择器
（1）、id选择器
html代码：id="值"，标签的id属性值是有且只有一个的，就好像人的身份证号码一样，没有相同的。
<p id="intro">This is a paragraph of introduction</p>
css代码：ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
#intro {font-weight:bold;}
（2）、class选择器（类选择器）
class中文：班、种类。
html代码：class="值"，多个标签的class属性值是可以一样的，即是可以和其他元素一同使用该类样式。
<h1 class="important"> This heading is very important. </h1> <p class="important"> This paragraph is very important. </p>
css代码：类选择用一个“.”英文点表示
.important{ color: #0000FF; }
（3）、属性选择器
html代码： 标签属性名=属性值，一个标签有多属性，一个属性可以给多个标签使用，下面是以title属性列子
<div title="hello"> 你好 </div> <div title="hi"> 您好 </div>
css代码：用中括符表示：[]，也可以直接匹配属性与属性值“[属性=属性值]”，中间多了一个“~”表示选择该属性的属性值包含单词"h"的所有元素
[title]{ color: #0000FF; } [title=hi]{ background: #FFFF00; }
[title~=h]{
background: #333333;
}
（4）、标签选择器
html代码：已标签名为选择器
<p> 你好 </p> <div class="important"> 您好 </div> <div title="fine"> 我也好 </div>
css代码：直接使用标签名：标签名{css代码}，也可以联合属性选择器使用
p{ color: #0000FF; } div[class]{ background: #FF0000; } div[title=fine]{ background: #0000FF; }
（5）、子代选择器
html代码：子代元素选择器，就是寻找子节点，可以标签名、类名、id名选择子节点，注意子节点不包括后代节点
<div> <p>你好</p> <h1> <p>我没有样式</p> </h1> </div>
css代码：用 “>” 号表示 下面代码表示选择了所有的div标签下的所有p标签，但是包括后代节点
div>p{ background: yellow; }
（6）、后代选择器
html代码：选择在当前标签的所有后代
<div> <p>你好</p> <h1> <p>我也被选中了</p> </h1> </div>
css代码：用一个空格表示，下面表示选择了所有的div下的所有的p标签
div p{ background: yellow; }
（7）、相邻兄弟选择器
html代码：两个相邻的元素，下面就是一个p标签和一个h1标签是相邻的
<div> <p>你好</p> <h1> 您好 </h1> </div>
css代码：用一个英文 “+” 号表示，选择了所有h1标签和p标签是相邻的两个标签
h1+p{ color: #0000FF; }
（8）、通用选择
通用选择是相对于所有标签的“*”
css代码：选择了所有标签的颜色为#0000FF，
*{ color: #0000FF; }
（9）、伪类选择器
a标签的伪类
a:link：选择还没有访问的链接
a:visited：选择所有已经访问过的链接
a:active：选择活动的链接
a:hover：选择鼠标悬浮在元素上的标签
input:focus：选择具有焦点的输入元素
p:first-letter：选择p标签的文本第一个文字
p:first-line：选择p标签的文本最后一行
p:first-child：选择p标签是其父元素的第一个子标签的样式，第一个子元素
伪类选择器还有很多。我就不一一列出来了。
（10）、伪元素
p:before：在p标签之前插入元素
html代码：
<p> 你好啊 </p>
css代码：content这个属性一定要写，可以为空，如果没有这个属性，该样式无效
p:before{ content:"hi"; color: #0000FF; }
结果：
p:after：在p标签后面插入元素
html代码：
<p> 你好啊 </p>
css代码： content这个属性也是一定要写
p:after{ content:"hello"; color: #0000FF; }
结果：
伪元素可以做很多事情，不只是文字也还可以将伪元素设置成方框，毕竟在css里面一切皆为框。