1.1 基本选择器
1.2 层级
-
空格
-
> -
+.item+li -
~.item~p
1.3 属性选择器
-
[attr]
-
[attr=value]
-
[attr^=value]
-
[attr$=value]
-
[attr*=value]
-
[][][]
1.4 伪类选择器
-
:link
-
:visited
-
:hover
-
:active
-
:focus
-
:first-child
.list li:first-child -
:last-child
-
:nth-child() 从1开始 odd even
-
:nth-last-child() 从1开始
-
:only-child
li:only-child -
:first-of-type
-
:last-of-type
-
nth-of-type()
-
nth-last-of-type()
-
only-of-type
<ul>
<li></li>
<li></li>
<p></p>
<li>li:nth-of-type(3) </li>
<li></li>
<li></li>
</ul>
li:nth-of-type(3) #选择到
li:nth-child(3) #没有满足条件的元素
1.5 伪元素选择器
-
::before
.item::before -
::after
.clearfix::after {content:''; display:block; clear:both}
<div class="nav clearfix">
子元素浮动
[::after 此处是伪元素创建的]
</div>
<div class="banner">
</div>
-
::first-letter
-
::first-line
-
::selection
-
::placeholder
::placeholder {color:red}<input placeholder="请输入用户名">
2 CSS3 基础
2.1 新增颜色单位
-
rgba() 不透明0~1
2.2 新增长度单位
-
rem
-
vw
-
vh
3 新增的CSS3属性
3.1 边框圆角
border-radius 长度单位
border-top-left-radius
border-top-righ-radius
border-bottom-left-radius
border-bottom-right-radius
3.2 布局
display: 值很多很多 .... table table-row...
box-sizing: content-box（默认值） / border-box
3.3 外轮廓
outline:1px solid #ccc
outline-style
outline-color
outline-width
3.4 不透明度
opacity: 0~1
3.5 阴影
box-shadow:水平偏移 垂直偏移; 偏移可以负值
box-shadow:水平偏移 垂直偏移 颜色;
box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/
box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;
3.5 背景
background-size: cover / contain / 400px 300px / 100% 100%
background: color image postion/size repeat attachment
3.6 CSS3变换
-
transform
translatex()
translatey()
translate(x, y)
rotate() 角度 deg
skewx() 角度deg
skewy()
skew(x, y) -
transform-origin 变换的原点。 对translate没有意义。 对rotate影响大
3.7 过渡效果
哪些CSS属性可以过渡
长度 (padding margin width height left/top/right/bottom border-width background-position ...)
颜色
变换
纯数字 (opacity、z-index)
触发过渡
伪类触发 :hover :focus ....
媒体查询 @media
JS
相关属性
transition-property 指定要过渡的属性 用,隔开。默认是 all
transition-duration 过渡持续时间
transition-timing-function 过渡线性效果 默认 ease
transition-delay 过渡延迟
transition：property timing-function duration delay
3.8 CSS3动画
关键帧
@keyframes 动画名字 {
0% {
}
20% {
}
40% {
}
100% {
}
}
相关CSS属性
animation-name 指定动画的名字
animation-duration 动画的执行时间
animation-timing-function 执行效果速度
animation-delay 延迟
animation-iteration-count 循环 次数 infinite(无限)
animation-direction: alternate （正向 反向 交替） reverse（反向）
animation-play-state: running / paused
animation 复合属性