一、初识CSS3
如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。
CSS3的现状
-
浏览器支持程度比较差，需要添加私有前缀
-
移动端支持优于PC端
-
不断改进中
-
应用相对广泛
如何对待
-
坚持渐进增强原则
-
考虑用户群体
-
遵照产品的方案
-
听Boss的
二、选择器
CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
2.1、属性选择器
其特点是通过属性来选择元素，具体有以下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$=demos]
2.2、伪类选择器
除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。
<h5>以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。
</h5>
重点理解通过E来确定元素的父元素:
-
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、1、2、3、4、... 但是当n<=0时，选取无效
- 实例1：选中所有的奇数的li
li:nth-child(2n-1){
color: red;
}
- 实例2：选中所有的7 的倍数的li
li:nth-child(7n){
color: red;
}
- 实例3：选中前面五个
li:nth-child(-1n+5){
color: red;
}
- 实例4：选中后面五个
li:nth-last-child(-1n+5){
color: red;
}
- 实例5：选中所有的偶数
li:nth-child(even){
color:red
}
- 实例6：选中所有的奇数
li:nth-child(odd){
color:blue;
}
n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等；
E:empty 选中没有任何子节点的E元素；（使用不是非常广泛）没有任何的子元素，包括空格。
<h5>目标伪类</h5>
E:target 结合锚点进行使用，处于当前锚点的元素会被选中；
<li><a href="#title1">CSS (层叠样式表)</a></li>
<h2 id="title1">CSS (层叠样式表)</h2>
h2:target{
color:red;
}
2.3、伪元素选择器
-
E::before、E::after（重点）：是一个行内元素，需要转换成块元素。
E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。
E:after、E:before在以后的开发中会反复用到，目前只需要有个大致了解 -
E::first-letter：文本的第一个字母或字（如中文、日文、韩文等）
-
E::first-line：文本第一行，可以实现文本第一行高亮
-
E::selection：可改变选中文本的样式
注意：":" 与 "::" 区别在于区分伪类和伪元素
关于before和after
-
CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念；
-
CSS3中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before、E:after伪类;
三、颜色
一种新的颜色的表示方式：rgba(255,0,0,0.1)
RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的色彩空间。虽然它有的时候被描述为一个颜色空间
新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。
Red、Green、Blue、Alpha即RGBA
Hue、Saturation、Lightness、Alpha即HSLA
RGBA、HSLA可应用于所有使用颜色的地方。
R、G、B 取值范围0~255
H：色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S：饱和度 取值范围0%~100%
L：亮度 取值范围0%~100%
A：透明度 取值范围0~1
关于透明度
-
opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；
-
transparent 不可调节透明度，始终完全透明
** 案例：**
- opacity 设置透明度，只能针对整个盒子设置透明度；
- 子盒子会继承父盒子的透明度；
.out{
width: 200px;
height: 200px;
background: green;
border: 1px solid darkgreen;
margin: 40px auto;
opacity: 0.3;
}
这样设置的话，在.out中的子盒子也会继承透明度，如果使用使用rgba 来控制颜色的话，相对opacity，就不具有继承性，子盒子就不会有透明度了。
四、文本（shadow阴影）
text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）：
-
水平偏移量 正值向右 负值向左；
-
垂直偏移量 正值向下 负值向上；
-
模糊度是不能为负值；
ul>li{
margin: 20px;
font-size: 24px;
}
ul>li:nth-child(1){
text-shadow: 5px 5px 2px #ccc;
}
ul>li:nth-child(2){
text-shadow: -5px -5px 2px #ccc;
}
ul>li:nth-child(3){
text-shadow: 5px 5px 2px #ccc, -5px -5px 2px #ccc;
}
可用text-shadow来实现浮雕文字的效果。
五、盒模型
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
box-sizing有两个值：content-box、border-box
-
content-box：对象的实际宽度等于设置的width值和border、padding之和
-
border-box：对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
个人公众号（icemanFE）：分享更多的前端技术和生活感悟
个人公众号.png
网友评论