css参考手册：css.doyoe.com
在css3中，不同的浏览器可能需要不同的前缀，它表示该css属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的
-webkit 代表chrome、safari私有属性
-moz 代表firefox浏览器私有属性
立即学习“前端免费学习笔记（深入）”；
-ms 代表IE浏览器私有属性
-o 代表opera浏览器私有属性
css语法结构
css语法由三部分构成：选择符、属性、值
Selector{Property:Value;}
↓ ↓ ↓
选择符 属性 值
css的三种引入方式
1、内嵌样式
2、内部样式表
3、外部样式表
三种引入方式的优先级别(就近原则)
内嵌样式 > 内部样式表 > 外部样式表
但!important能改变它们的优先级别
<p class="content" style="color:red;">把我变成蓝色的字体p>
<style>
.content{ color: blue !important;}
style>
css代码注释
以 /* 开始，*/ 结束
通配选择符
*号表示所有对象，所谓通配选择符，就是指可以使用模糊指定的方式来对对象进行选择，指定样式
*{ margin:0; padding:0;}
元素选择符
所谓元素选择符，指以网页中已有的标签名作为名称的选择符
body{ background:#fff;}
h1{ color:#000;}
p{ color:#ccc;}
群组选择符
除了可以对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义
使用逗号对选择符进行分隔，对页面中需要使用相同样式的地方，只需写一次样式
h1,h2,h3,p{
font-size:12px;
font-family:arial;
}
关系选择符
包含选择符(E F)选择所有被E元素包含的F元素
子选择符(E>F)选择所有作为E元素的子元素F
相邻选择符(E+F)选择紧贴在E元素之后F元素
兄弟选择符(E～F)选择E元素所有兄弟元素F
<div>
<a>背景色是#E61061a>
<span><a>背景色是#67B374a>span>
div>
<p>背景色是#0000FFp>
<p>背景色是#808080p>
<p>背景色是#808080p>
<style type="text/css">
div>a{ background:#E61061; }
span a{ background:#67B374; }
p~p{ background:#808080; }
div+p{ background:#0000FF; }
style>
id及class选择符
id选择器以"#"来定义，id选择器可以为标有特定id的html元素指定特定的样式，每个id名称中只能使用一次，不得重复
类选择器以"."来定义，与id不同，class允许重复使用，比如页面中的多个元素，都可以使用同一个样式定义
<p id="p1">这是一个段落p>
#p1{
font-size:12px;
font-weight:bold;
}
<p class="p2">这是一个段落p>
.p2 {
font-size:12px;
font-weight:bold;
}
伪类选择符
E:link 设置超链接a在未被访问前的样式
E:visited 设置超链接a在其链接地址已被访问过时的样式
E:hover 设置元素在其鼠标悬停时的样式
E:active 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式
注意，hover必须位于link和visited之后，active必须位于hover之后
可靠的顺序是：(link)(visited)(hover)(active)
<a href="#">点我a>
<style>
a{text-decoration: none; font-size: 50px;}
a:link{color: black;}
a:visited{color: #ccc;}
a:hover{color: red;}
a:active{color: blue;}
style>
E:focus 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式
<input type="text">
<style>
input:focus{ outline: 1px solid red; border:none; }
style>
E:first-child 匹配父元素的第一个子元素E
E:last-child 匹配父元素的最后一个子元素E
E:only-child 匹配父元素仅有的一个子元素E
E:nth-child(n) 匹配父元素的第n个子元素E
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E
E:first-of-type 匹配同类型中的第一个同级兄弟元素E
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E
<ul id="list">
<li>这是第1项列表li>
<li>这是第2项列表li>
<li>这是第3项列表li>
<li>这是第4项列表li>
<li>这是第5项列表li>
ul>
<style>
#list li{ border-bottom: 1px solid #ccc; }
#list li:first-child{ font-weight: bold; }
#list li:last-child{ border-bottom: none; }
#list li:nth-child(2){ color: red; }
#list li:nth-last-child(2){ color: blue; }
style>
E:checked 匹配用户界面上处于选中状态的元素E(用于input type为radio与checkbox时)
<input type="radio" name="num">1
<input type="radio" name="num">2
<input type="radio" name="num">3
<style>
input:checked{ width: 30px; height: 30px; }
style>
E:lang(fr) 匹配使用特殊语言的元素E。很少用
E:not(s) 匹配不含有s选择符的元素E
E:root 匹配E元素在文档的根元素。常指html元素
E:empty 匹配没有任何子元素(包括text节点)的元素E
E:enabled 匹配用户界面上处于可用状态的元素E
E:disabled 匹配用户界面上处于禁用状态的元素E
E:target 匹配相关URL指向的元素E
<a href="#nav1" id="nav1">导航一a>
<a href="#nav2" id="nav2">导航二a>
<a href="#nav3" id="nav3">导航三a>
<style>
a{ text-decoration: none; }
a:target{ color: red; }
style>
