CSS3补充内容
一、特殊选择器
1、* 用于匹配任何的标记
2、> 用于指定父子节点关系：子节点
3、E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F：挨着的
4、E ~ F 匹配所有E元素之后的同级元素F：同级的
5、名称[表达式]
5.1 E[attr] 匹配所有具有attr属性的E元素（[attr]获取所有的定义了attr]的标签）；
5.2 [attr=val] 获取所有定义了attr属性并且属性值等于val的标签：如果不指定val，则与5.1相同。
5.3 [attr^=val]获取所有定义了attr属性并且属性值以val开头的标签；
5.4 [attr$=val]获取所有定义了attr属性并且属性值以val结尾的标签；
5.5 [attr*=val]获取所有定义了attr属性并且属性值包含val字符的标签；
5.6 [attr~=val]获取所有定义了attr属性并且属性值包含val单词的标签；
5.7 [attr|=val]获取所有定义了attr属性并且属性值等于val或者以val-开头的标签。）
6、伪类/伪元素
6.1 css伪类：用于向某些选择器添加特殊的效果，使用已知标签来指定相对关联标签的class行为。
如：<p><i>first</i><i>second</i></p>
p>i:first-child {color: red} //伪类 :first-child 添加样式到第一个子元素
伪类通常用一个冒号表示。
css伪元素：用于将特殊的效果添加到某些选择器，使用已知标签来让相对关联内容具有元素的行为。
如：<p>i am stephen lee.</p>
p:first-letter {color: red} //伪元素 :first-letter 添加样式到第一个字母
伪元素通常是用两个冒号表示的。
** 伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到。
常用伪类、伪元素
6.1.1 a:hover,a:link,a:active,a:visited,:focus /*动态伪类*/
6.1.2 :disabled,:enabled,:checked,:read-only,:read-write /*UI状态伪类*/
6.1.2.1 :read-only 只读状态
6.1.2.2 :read-write 非只读状态
6.1.3 css3伪类
6.1.3.1 :nth-child(n)其父元素的第n个元素.
如：p:nth-child(2){color:red;} p元素是其父元素的第2个元素的话字体颜色就是红色。
6.1.3.2 nth-last-child(n) 其父元素的倒数第n个元素。
6.1.3.3 :nth-of-type(n)
如：p:nth-of-type(2){color:red;} p元素是其父元素的第2个p元素的话字体颜色就是红色。
6.1.3.4 :first-child 其父元素的第一个元素
6.1.3.5 :last-child 其父元素的最后一个元素
6.1.3.6 nth-last-of-type(n)
如：p:nth-last-of-type(2){color:red;} p元素是其父元素的倒数2个p元素的话字体颜色就是红色
6.1.3.7 :first-of-type 其父元素的第一个p元素
6.1.3.8 :last-of-type 其父元素的最后一个p元素
6.1.4 :not() /*否定伪类选择器*/
如：p:not(.a){color:red;})
6.2 常用的伪元素
6.2.1 ::before,::after
6.2.2 ::first-letter
6.2.3 ::first-line
6.2.4 ::selection
二、CSS权重
1、权重列表
|
类型权重 |
A |
B |
C |
D |
|
内联 |
1 |
0 |
0 |
0 |
|
ID |
0 |
1 |
0 |
0 |
|
CLASS/ATTRIBUTE |
0 |
0 |
1 |
0 |
|
TAB/PSEUDO-CLASS |
0 |
0 |
0 |
1 |
|
继承 |
0 |
0 |
0 |
0 |
|
*/选择符 |
none |
|||
|
limportant |
忽略当前样式权重 |
|||
三、CSS3新增属性
1、定义文本样式
1.1 文字阴影text-shadow
如：text-shadow:5px 5px 5px #333, /*水平位移、垂直位移、模糊半径、颜色
-15px -15px 5px #333; 可以设置多个阴影
1.2 文字缩进text-indent
如：text-indent：30px; 文本缩进30px
1.3 文本换行
如： word-wrap:break-word; /*断单词
word-break:break-all; /*断字符
white-space:nowrap; /*强制在一行内显示所有文本
1.4 文本溢出
如：text-overflow:clip; /*不显示省略标记，而是简单的裁切掉*/
text-overflow:ellipsis; /*当对象内文本溢出时显示省略标记*/
overflow:hidden; /*溢出部分隐藏
1.5 圆角 border-radius
如：border-radius:5%; 四个角出现相同的圆角
border-radius:20px 5px 10px 40px; 四个角出现不同的圆角
border-radius:50%; 此时会变成圆
1.6 阴影 box-shadow
如：box-shadow:10px 10px 10px #F00, 水平位移、垂直位移、阴影半径、颜色
-2px -5px 10px #00F; 可以设置多个阴影
box-shadow:inset 10px 10px 10px #FF0000; 内阴影
1.7 背景图片铺满 background-size:cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
1.8 旋转 transform
如：transform:rotate(-30deg) scale(2); rotate：旋转的度角，scale：放大倍数
1.9 平滑过渡 transition
如：transition:transform 2s ease-in; transform：旋转，2s：平滑过渡的时间，
ease：匀速
ease-in：加速
ease-out：减速
1.10 更复杂的动画 animation
如：animation:x-spin 20s infinite linear; /*动画名称，经历时间，播放次数(为infinite则一直播放)，播放方式*/
1.11 渐变
线性渐变：从一段线性变化到另一端
如：background：-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.4#fff),color-stop(0.6,#fff)
线性渐变，开始位置，结束位置，开始的颜色，结束的颜色，色标(色标位置，色标颜色) ---可以色织多个色标，色标就是颜色过渡点
径向渐变：从指定的点为圆心向圆的外沿发散方式变化
如：background：-webkit-gradient(radial,center center,0,center center,460 from(blue),to(red),color-stop(0.6,#fff)
径向渐变，内圆圆心位置，内圆半径，外圆圆心位置，外圆半径，开始的颜色，结束的颜色，色标(色标位置，色标颜色)
1.12 响应式布局
@media screen and (min-width:900px) 屏幕最小为900PX时
@media screen and (min-width:600px) and (max-width:900px) 屏幕大小为600~900PX之间时
@media screen and (max-width:600px) 屏幕最大为600PX时
