CSS 3 现状
兼容性差，需添加私有前缀／移动端优于PC端／不断改进中／渐进增强原则／考虑用户群体／遵照产品的方案 ；
CSS3手册 需要阅读其--阅读及使用指引
[]表示全部的可选项
|| 或者
| 表示 多选一
? 表示 0个或1个
* 表示 0个或多个
{}表示范围 {A}代表出现A次 ，{A,B}代表出现A次以上B次以下 ，B可以省略，{A,} 代表至少出现A次，无上限
# 出现1次以上，以逗号隔开，可以选择后面跟大括号的方式精确表示重复次数：<length>#{1,4}.
!代表出现产生一个值，即使组内的值都可以省略，但至少有一个值不能呗省略：[A?B?C?]!
属性选择器
标签选择器／类名选择器／id选择器／后代选择器／标签指定（交集）选择器／并集选择器／子代选择器／通配符
div+p:选择div后第一个p
div~p:选择div后所有p
具体有以下5种形式：
E[attr] 表示存在attr属性即可: div[class]
E[attr=val] 表示属性值完全等于val： div[class=mydemo] ;
E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置 ；div[class*=mydemo]
E[attr^=val] 表示的属性值里包含val字符并且在“起始”位置 ; div[class^=mydemo]
E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置 ；div[class$=mydemo]
伪类选择器：
:link. 正常状态
:viaited 已经问过的链接
:hover 鼠标经过
:action 点击
CSS3 新增其他的伪类选择器
结构伪类：以某元素相对于其父元素或兄弟元素的位置来获取元素
E:first-child 第一个子元素
E:last-child 最后一个子元素
E:nth-child(n) 第n个子元素。计算方法是E元素的全部兄弟元素；
div>ul>li:nth-child(3){. color:deeppink; } 第三个元素
E:nth-last-child(n) 同E:nth-child(n)相似，只是。倒着计算 n<=0 的时候，选取无效
li:nth-child(2n-1){ color:red ;}. //选择li父盒子中所有的奇数li
li:nth-child(odd){ color:blue;} //奇数
li:nth-child(-1n+5 ) { color:yellow; } // 前面五个
li:nth-last-child(-1n+5 ) { color:green; } // 倒数的五个
li:nth-child ( 2n ) { color:pink } // 偶数
li:nth-child (even) { color:black } // 偶数
E:empty 选中没有任何子节点的E元素；没有任何元素的子节点，包括空格。
E:target. 目标伪类，配合锚点进行使用，处于当前锚点的元素会被选中/ 图片切换
<li><a href="#title1"> CSS(层叠样式表）</a></li>
<h2 id="title">CSS (层叠样式表）</h2>
h2:target { color:red; }
伪元素选择器
伪元素E：befor{ }在之前添加 E::after{ } 在之后添加 是一个行内元素，需要转换成块元素
E::first-letter {}文本的第一个字母或字：首字下沉...
E::first-line {} 文本第一行：文本第一行 高亮...
E::selection {} 可改变选中文本的样式；
E：after 伪类，在新版本会自动被识为 E::after 目的：做兼容处理
颜色
opcity属性会被子代继承，无法更改子代的属性
transparent 完全透明，无法修改属性值
RGBA模式：红绿蓝 alpha
HSLA模式: H色相、色调。 0-360（红橙黄绿青蓝紫）
S:饱和度 0-100%
L：明度、亮度 0-100%
A: 透明度。 0-1
有颜色的地方都可以用半透明
文本shadow阴影：
text-shadow. 可分别设置偏移量、模糊度、颜色（可设透明度）
text-shadow: 水平距离 垂直距离 模糊程度 颜色
水平偏移量 ：正值向右 负值向左
垂直偏移量 ：正值向下 负值向上
模糊度不能是负值／值越大越模糊。左下为正，右上为负。同一个文本可以有多个阴影
ul>li:nth-child(1) { text-shadow:-5px -5px #ccc;}
ul>li:nth-child(2) { text-shadow:-5px -5px #ccc;}
ul>li:nth-child(3) { text-shadow: 5px 5px 2px #ccc ,-5px -5px 2px #ccc;}
CSS3 中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box
传统盒子模型：
宽度=padding+border+width／内容区域大小不变／总体大小变化
CSS3盒子模型：
box-sizing: content-box/padding-box/border-box
设置谁 ，谁不变
content-box：内容盒子，外加盒子，加大边距和边框会加大总体大小，内容区域大小不变
padding-box：内边距盒子
border-box：边框盒子，内减盒子。加内边距和边框只会减少内容的大小
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>‘
<style>
.items{
1100px;
margin: 100px auto;
}
.itme{
316px;
height: 170px;
float: left;
margin-right:20px;
box-sizing: border-box;
}
.itme:hover{
border: 5px solid #666;
}
img{
100%;
height: 100%;
}
</style>
</head>
<body>
<div class="items">
<div class="itme">
<img src="images/1.jpg" alt=""/>
</div>
<div class="itme">
<img src="images/2.jpg" alt=""/>
</div>
<div class="itme">
<img src="images/3.jpg" alt=""/>
</div>
</div>
</body>
</html>
私有化前缀：
解决兼容性问题
-webkit- 谷歌、苹果浏览器内核
-moz- 火狐浏览器内核
-ms- IE浏览器内核
-o- 欧朋浏览器内核
<style> .box{ 1100px; height: 200px; border: 1px solid #000; margin:100px auto; /* 背景渐变*/ /* -webkit-： chrome safari 谷歌(webkit内核的) 苹果 -moz-：火狐 -ms-:ie -o-: 欧朋 */ background: -ms-linear-gradient(left,red 0%, green 100%); background: -webkit-linear-gradient(left,red 0%, yellow 50%, green 100%); background: -moz-linear-gradient(left,red 0%, green 100%); background: -o-linear-gradient(left,red 0%, green 100%); background: linear-gradient(left,red 0%, green 100%); } </style> </head> <body> <div class="box"></div> </body>