CSS伪类选择器
几种状态伪类
- E:link 链接未被访问前状态
- E:visited 链接已访问后状态
- E:hover 鼠标在其元素上的悬浮状态
- E:active 元素被激活状态下(鼠标点击与释放之间)
- E:focus 鼠标点击并松开后的状态或者元素处于输入焦点状态(可用于button点击状态)
- 对于a标签的几种状态伪类，其书写顺序为:
:link(访问前)、:visited(访问后)、:hover(鼠标移入)、:active(鼠标点击)、:focus(鼠标点击并释放后)
CSS3新增的选择器
-
子级选择器
>
parent>child>符号之前书写父级的选择器，>符号之后写子级选择器，必须满足父子级关系才能选中标签选中的是直接子代
-
兄弟选择器
+、~-
相邻兄弟选择器
+
prev+next选中的是紧跟在prev后面的下一个同级元素next(拥有同一父元素)
-
同级兄弟通用选择器
~
prev~Siblings选中的是prev后面的所有同级兄弟元素Siblings(拥有同一父元素)
-
-
属性选择器
选择带有某种属性的所有元素选择器 描述 E[attr] 选择具有attr属性的E元素 E[attr="val"] 选择具有attr属性且属性值等于val的E元素 E[attr^="val"] 匹配具有attr属性、且值以val开头的E元素 E[attr$="val"] 匹配具有attr属性、且值以val结尾的E元素 E[attr*="val"] 匹配具有attr属性、且值中含有val的E元素 E[attr1][attr2] 匹配同时具有attr1和attr2属性的E元素 -
结构伪类选择器
选择器 描述 E:first-child 匹配父元素中的第一个子元素E E:last-child 匹配父元素中最后一个E元素 E:nth-child(n) 匹配父元素中的第n个子元素E E:first-of-type 选择父元素下的指定类型E的第一个元素 E:last-of-type 选择父元素下的指定类型E的最后一个 E:nth-of-type(n) 选择父元素下的指定类型E的第n个 其中n 可以是数字，关键字和公式。公式一般n从0开始一直递增（第 0 元素或者超出了元素的个数会被忽略）
nth-child(n)与nth-of-type(n)的区别
E:nth-child(n)：选择的是父元素下的第n个子元素，并且该元素的类型为E，须同时满足两个条件，否则不生效。
例如：div p:nth-child(1){}选中的是div下的第一个子元素，且该元素是p标签，否则不生效E:nth-of-type(n): 选择的是父元素下的同类型E中的第 n 个同级兄弟元素，会忽略其他同级的非同类型元素
例如：div p:nth-of-type(1){}选中的是div下的所有p元素中的第一个p标签
目标伪类选择器 :target
突出显示,选中被激活的HTML锚点元素(相关url指向的E元素)
:target/E:targetUI状态伪类
:checked :匹配用户界面上处于选中状态的元素E
:enabled :匹配用户界面上处于可用状态的元素E
:disabled :匹配用户界面上处于禁用状态的元素E否定伪类 :not(selector)
将指定选择器selector匹配到的元素排除出去-
伪元素选择器
选择器 描述 E::before 在 E 元素内部的前面添加一个元素 E::after 在E元素内部的后面添加一个元素 E::first-letter 匹配E元素内的第一个字母 E::first-line 匹配E元素内的第一行文本 -
CSS3中伪元素的双冒号和单冒号的区别
区别：双冒号是CSS3的新规范，单冒号是CSS2中的写法，两者等效，IE兼容性上单冒号比双冒号好，并且CSS3规范上，双冒号表示伪元素，而单冒号表示伪类对于伪元素注意事项
- 伪元素只能应用于双标签
- 伪元素中的冒号不能与元素之间存在空格
- 伪元素(::before、::after)内部必须添加content属性，content:"";
- 常用的::before和::after创建的元素属于行内元素
-
伪类与伪元素的区别
根据W3C对两者应用的描述：- 伪类：用于向某些选择器添加特殊的效果
- 伪元素：用于将特殊效果添加到某些选择器中
对于伪类，从字面上可以理解为一种虚拟的类class，伪类所产生的效果可以通过对已有的元素添加一个实际的类来达到。
而对于伪元素，可以理解为一种虚拟的元素，伪元素所产生的效果可以通过添加一个真实的新元素，再为其添加css样式，从而达到效果。
两者根本区别在于是否会创建一个新元素
选择器权重
基础选择器：id选择器 > 类选择器 > 标签选择器 > *
伪类选择器、属性选择器的权重等于类选择器
伪元素选择器的权重等于标签选择器
CSS3新增属性
-
CSS3盒模型（box-sizing属性）
content-box- 默认值，标准模式(Standard)，width、height属性值只包含内容宽高，不包括padding和border
- 盒子的大小为width(height) + padding + border，内容区域为width和height部分
border-box
- 怪异模式(Quirks)，width、height属性值包含内容宽高、padding、border
- 盒子的大小为width和height,添加padding和border之后，内容区域就会相应缩小
-
边框圆角border-radius
设置边框圆角，px、%（IE8及以下不支持该属性）属性值有两种方式
- x-radius/y-radius: 水平半径 / 垂直半径
- radius: 水平、垂直半径设置一个值
border-radius的书写方式类似于padding、margin
也可以给某一个角设置圆角，如borde-top-left-radius(top-left、top-right、bottom-right、bottom-left)
-
文字阴影text-shadow
设置文字阴影效果h-shadow(水平阴影位置)、v-shadow(垂直阴影位置)、blur(模糊程度)、color(阴影颜色)
可以设置多层阴影，每层阴影的属性值用
,隔开(先写的阴影会压盖后写的)
text-shadow:3px 3px 2px #ff0 , 6px 6px 2px #f0f -
盒子阴影box-shadow
为盒子的边框添加阴影效果h-shadow(水平阴影位置)、v-shadow(垂直阴影位置)、blur(模糊程度)、spread(阴影面积)、color(阴影颜色)、inset(设置为内部阴影)
可以设置多层阴影，用
,隔开(先写的阴影会压盖后写的)
box-shadow:3px 3px 5px 4px #ff0 , 7px 7px 5px 4px #f0f -
过渡属性transition
给元素设置属性改变的动画效果(IE9及以下不支持，Safari需要给属性加前缀-webkit-)属性值
- transition-property：过渡属性名（none、具体属性名、all）
- transition-duration：过渡时间（s秒，单位必须写）
- transition-timing-function：运动曲线（linear、ease等）
- transition-delay：延迟执行时间
-
2D转换和3D转换属性transform
IE10、Firefox/Opera支持transform属性，而Chrome和Safari需要添加前缀-webkit-,IE9需要添加前缀-ms-2D转换
对元素进行移动、缩放、旋转、拉长或拉伸
位移translate()
translate(x, y): 水平、垂直方向位移距离
translate(x): 水平方向的位移缩放scale()
scale(x, y): 缩放宽度x、高度y
scale(n): 表示宽高同时缩放n倍
scaleX(n)、scaleY(n)旋转rotate()
书写语法；rotale(数值deg)
deg为度数单位，正数为顺时针，2D只有一个属性值，元素旋转后，坐标轴也会改变斜切（倾斜）skew()
transform:skew(x,y)
水平、垂直方向的倾斜角度变换原点transform-origin
transform-orign: x y ;
两个值，中间用空格隔开
x：left、center、right、像素值、%
y：top、center、bottom、像素值、%
3D转换
透视属性perspective
设置在Z轴的视线焦点的观察位置，从而视线3D效果
像素值越大，观察点距离Z轴原点越远，图形效果越完整且接近原始尺寸
perspective属性设置在3D变换元素的父级transform-style属性
设置被嵌套的子元素在父元素的 3D 空间中显示，子元素是否保留 3D 空间
flat: 默认值，子元素2D平面呈现
preserve-3d: 保留3D空间，呈现真正的3D效果
transform-style属性设置给 3D 变换图形的父级
因此，要实现真正的3D效果，最好是给进行3D变换的元素的父级同时添加3D环境和透视属性
方法
transform-style:preserve-3d;
perspective:1000px;3D旋转
正值表示沿对应轴顺时针旋转
rotateX()、rotateY()、rotateZ()3D位移
正值向对应轴的正方向移动
translateX()、translateY()、translateZ()
-
CSS3动画属性 animation方法 + @keyframes规则
@keyframes规则- 用于创建动画，使用百分比来规定动画的关键帧，也可以使用关键字"from"和"to"来表示，等同于0%(动画开始关键帧)和100%(动画结束关键帧)
- 每一个关键帧中写元素变化的CSS样式
@keyframes 动画名称{ 0%{/*元素动画初始的css样式*/} 25%{/*css变化样式*/} 50%{/*css变化样式*/} 75%{/*css变化样式*/} 100%{/*元素动画结束的css样式*/} }
animation属性方法
- 用于对动画进行绑定
- 要实现真正的动画，需要将@keyframes中创建的动画绑定到某个选择器上，否则不生效
- 属性值：
animation-name
@keyframes定义的动画名称animation-duration
动画时间(一个周期，s/ms)，默认为0animation-timing-function
动画的速度曲线默认'ease'animation-delay
动画延迟执行时间,默认为0animation-iteration-count
动画次数,默认是1，infinite(无限循环)-
animation-direction
动画是否反向，可选值有：- normal：默认值(0% ~ 100%)
- reverse: 反向(100% ~ 0%)
- alternate: 往返
- animation语法：
animation: 动画名称 动画时长 速度曲线 动画次数 延时时间；
其中，动画名称和动画总时长是必需设置的，其他为可选属性值，不写则以默认值加载
-
动画使用步骤
- 声明动画 @keyframes:
指定动画名称 ，如： @keyframes move { }
指定动画关键帧(0% ~ 100%) - 为元素调用动画:
animation，指定动画名以及动画时长、动画次数等，如 animation: move 3s;
案例：实现一个元素先水平向右移动500px，然后向下移动500px，然后向左移动500px，最后向上500px回到原位，5S完成动画并一直重复
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@keyframes和animation实现动画</title> <style> .box { width: 550px; height: 550px; border: 1px solid #000; margin: 50px auto; position: relative; } .ball { width: 50px; height: 50px; border-radius: 50%; background-color: #f00; position: absolute; left: 0; top: 0; } @keyframes move { 0% { left: 0; top: 0; } 25% { left: 500px; top: 0; } 50% { left: 500px; top: 500px; } 75% { left: 0; top: 500px; } 100% { left: 0; top: 0; } } .ball { animation: move 5s infinite; } </style> </head> <body> <div class="box"> <div class="ball"></div> </div> </body> </html> - 声明动画 @keyframes:
