CSS3转发自--Devil css3新增子级选择器(5个) 注：如何判断一个元素是行内元素还是块级元素？答：加背景颜色查看一下就知道了！ 子级选择器
含义： 子级选择器用于选择带有特定父元素的元素。 书写语法：Element1 > Element2 注意事项：必须满足父子级关系才能选中标签。(区别于：后代选择器) 兄弟选择器
两种书写语法
选择器 简介 element1+element2 匹配同一个父元素中紧跟在element1后面的一个element2元素 element1~element2 匹配同一个元素中在element1后面的所有element2元素 相邻兄弟选择器
含义：相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素(只有一个)，而且二者有相同的父元素。 注意： 只能选中紧跟在后面的一个E2元素 如果后面紧跟的元素不是所写的标签，则样式不会生效 +符号前后可以添加空格书写 两者有相同的父元素
其他兄弟选择器
含义：匹配同一个父元素中在element1后面的所有的element2元素。 书写语法：element1~element2 ~前后可以添加空格书写 总结：(满足两个条件)
同一个爸爸 兄弟为element2类型的(紧跟的1个/不必紧跟的多个) 结构伪类选择器
选择器简介：
选择器 简介 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个 nth-child(n)
n可以是：数字、关键字(even偶数、odd奇数)、公式 常见的公式如下图所示 如果是公式，则从0开始计算，n是从0,1,2,3...一直递增 但是第0元素或者超出了元素的个数会忽略 E:nth-child(n)和E:nth-of-type(n)的区别
区别： 第n个元素是E元素的选中 为E元素的第n个 实例 伪元素选择器
新增伪元素
选择器 介绍 E::before 在E元素内部的前面插入一个元素 E::after 在E元素内部的后面插入一个元素 E::first-letter 选择到了E容器内的第一个字母 E::first-line 选择到了E容器内的第一行文字 h5写法和传统写法区别
单冒号E:before 双冒号E::before 浏览器对以上写法都能识别，双冒号是h5的语法规范。 伪元素的注意事项
伪元素只能给双标签添加，不能给单标签添加 伪元素的冒号前不能有空格，如E ::before这个写方法是错误的 伪元素里面必须写上属性content:"" before和after创建一个元素，但是属于行内元素 注：如何判断一个元素是行内元素还是块级元素？答：加背景颜色查看一下就知道了！ 因为在js的DOM里面看不见刚才创建的元素，所以我们称为伪元素 属性选择器
含义：用来选择包含指定属性的标签 选择器 简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择具有att属性且属性值等于val的E元素 E[att^="val"] 选择具有att属性且属性值以val开头的E元素 E[att$="val"] 选择具有att属性且属性值以val结尾的E元素 E[att*="val"] 匹配具有att属性且属性值中包含val的E元素 选择器权重 基础选择器：id选择器 > 类选择器 > 标签选择器 > * 伪类选择器、属性选择器的权重等于类选择器 伪元素选择器的权重等于标签选择器 注：高级选择器的权重计算：id个数、类选择器个数、 标签选择器个数 css3盒模型 css3边框圆角属性
属性名: border-radius
属性值：像素值或者百分比，百分比参考的是盒子整体宽度、高度的百分比
属性值 说明 x-radius/y-radius 前面是水平半径，后面为垂直半径，得到的是椭圆角 radius 一个属性值，则水平和垂直都设置为同一个值，得到的是圆角 单一属性(注：先写垂直方向再写水平方向)
border-top-left-radius:半径; border-top-right-radius:半径; border-bottom-left-radius:半径; border-bottom-right-radius:半径; 简写方法
border-radius 类似于padding也可以有四种值的写法。 左上角 右上角 右下角 左下角 左上角 右上角和左下角 右下角 左上角和右下角 右上角和左下角 四个角相同 /的属性值写法 border-radius属性值中出现了/斜线，那么/前面可以设置水平方向四种值的写法，/后面可以设置垂直方向四种值的写法。 实例： 水平方向：三值法；垂直方向：两值法
浏览器兼容 IE8及以下版本浏览器不支持border-radius属性，其他浏览器都支持。
实际应用
正圆：border-radius设置为宽高的一半，宽与高相等 div { width: 100px; height: 100px; padding: 20px; border-radius: 70px; } 复制代码 css3文字阴影
作用：text-shadow可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、模糊距离以及阴影的颜色。
属性值 简介 h-shadow 必需。水平阴影的位置，允许负值。 v-shadow 必需。垂直阴影的位置，允许负值。 blur 可选。模糊的距离 color 可选。阴影的颜色 文字阴影语法
h1 { text-shadow: 4px 4px 5px #ccc; } 复制代码 多层阴影
作用：可以向文本添加多个阴影，逗号分隔多个阴影的属性值。 注：多阴影中，先写的阴影压盖在后写的阴影上。
css3盒子阴影
作用：box-shadow属性用于对盒子边框添加阴影。
属性值 简介 h-shadow 必需。水平阴影的位置。允许负值 v-shadow 必需。垂直阴影的位置，允许负值 blur 可选。模糊距离 spread 可选。阴影的尺寸 color 可选。阴影的颜色 inset 可选。将外部阴影改为内部阴影 多层阴影
可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。注意：多阴影中，先写的阴影压盖在后写的阴影上。 总结
不论是文字阴影还是盒子阴影，属性值中的负值与正值都需要遵循x、y轴的坐标 css3过渡属性
属性名：transition
作用：在不使用Flash或者JavaScript的情况下，使用transition可以实现补间动画(过渡效果)，并且当前元素只要有“属性”发生变化时即存在两种状态(用A和B代替)，那么A和B之间就可以实现平滑的过渡动画效果。
语法格式
transition: 过渡的属性 过渡时间 运动曲线 延时时间; 复制代码 单一属性写法
属性 描述 transition 简写属性 transition-property 规定应用过渡的CSS属性的名称 transition-duration 定义过渡效果花费的时间。默认是0 transition-timing-function 规定过渡效果的时间曲线。默认是"ease" transition-delay 规定过渡效果何时开始。默认是0 transition-property过渡的属性
none表示没有属性过渡 all表示所有变化的属性都过渡 属性名使用具体的属性名，多个属性名中间逗号分隔 时间
必需以s为单位，0s也必须加单位。 tansition-timing-function 时间曲线
值 描述 linear 规定以相同速度开始至结束的过渡效果。 ease 慢速开始，然后变快，最后慢速结束 ease-in 慢速开始 ease-out 慢速结束 ease-in-out 慢速开始和结束 cubic-bezier(x1,y1,x2,y2) 在函数中定义自己的值。x1、x2取是0至1之间的数值，y1、y2取值任意，四个数值表示拉扯的点的两个坐标。 贝塞尔曲线
浏览器兼容
IE10、Firefox、Chrome以及Opera支持transition属性 Safari需要前缀-webkit- 注意：IE9以及更早的版本不支持和transition属性 2D转换 理解什么是2D转换
属性名：transform 作用：对元素进行移动、缩放、旋转、拉长或拉伸。 配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash实现的效果。 位移translate()
书写语法 | 值 | 说明 | | translate(x) | 只有一个数值，表示水平方向的位移 | translate(x,y) | x,y分别为水平和垂直方向位移的距离，可以为px值或百分比，区分正负 缩放scale()
书写语法： 值 说明 scale(x,y) x,y分别为改变元素的宽度和高度的倍数 scale(n) 只有一个值，表示宽度和高度同时缩放n倍 scaleX(n) 改变元素的宽度 scaleY(n) 改变元素的高度 旋转rotate()：找中心点进行旋转
书写语法：rotate(数字deg) deg为度数单位，正数表示顺时针选转，负数表示逆时针旋转。2D旋转只有一个属性值。 注意：元素旋转后，坐标轴也跟着发生转变。因此，多个属性值同时设置给transform时，书写顺序不同导致的转换效果有差异。 实例：先设置旋转还是先设置位移是有区别的 css .box img { transform: rotate(30deg) translate(50px); } 倾斜skew()
书写语法：transform: skew(数字deg,数字deg); 两个属性值分别表示水平和垂直方向的倾斜角度。属性值可以为正可以为负，第二个数值不写默认0 总结
角度正负：顺时针、逆时针 px值正负：x、y 轴 transform-origin(基准点)属性
类似于background-position
作用：调整元素的水平和垂直方向原点的位置
属性值：两个，中间用空格分隔
属性值 说明 x 定义x轴的原点在何处。可能的值:left、center、right、像素值、百分比 y 定义y轴的原点在何处。可能的值:top、center、bottom、像素值、百分比 实例：改变基准点
3D转换 transform属性不止能实现2D转换，也可以制作3D立体转换效果，比普通的x、y轴组成的平面效果多了一条z轴，如下图所示
透视
含义：透视可以将一个2D平面，在转换的过程当中，呈现3D效果 特点：近大远小 透视属性perspective 作用：设置在z轴的视线焦点的观察位置，从而实现3D查看效果。 属性值：像素值，数值越大，观察点距离z轴原点越远，图形效果越完整且接近原始尺寸。 注意：透视属性需要设置给3D变化元素的父级 3D旋转
需要分别对三个方向的旋转角度值
属性值 说明 rotateX(angle) 定义沿着X轴的3D旋转 rotateY(angle) 定义沿着Y轴的3D旋转 rotateZ(angle) 定义沿着Z轴的3D旋转 注意：属性值的角度区分正负。
正数表示沿对应坐标轴顺时针方向旋转 负数表示沿对应坐标轴逆时针方向旋转
3D位移
属性值 值 说明 translateX(x) 设置X轴的位移 translateY(y) 设置y轴的位移 translateZ(z) 定义3D位移，设置Z轴的位移值 属性值为像素值或百分比，正负表示位移的方向。 正值向对应轴的正方向移动 负值向对应轴的负方向移动 3D正方体案例
transform-style属性
作用：设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴。 属性值： flat: 所有子元素在2D平面呈现 preserve-3d: 保留3D空间 浏览器兼容
IE10、Firefox以及Opera支持transform属性 Chrome和Safari需要前缀-webkit- IE9需要前缀-ms- 动画 作用：css3中提供了自己的动画制作方法，这可以在与多页面中取代动画图片、Flash动画以及JavaScript.
css3的动画制作分为两步：创建动画、绑定动画
创建动画 @keyframes规则：能创建从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。 规则：需要使用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。0%是的动画开始，100%是动画的完成。 书写方法 @keyframes 动画名称 { 动画过程，可以添加任意百分比的动画细节 } 复制代码 绑定动画 animation属性：将@keyframes中创建的动画绑定到某个选择器，否则不会产生动画效果
语法
div { animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间; } 复制代码 单一属性列表 属性 描述 animation-name 动画名称 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是0 animation-timing-function 规定动画的速度曲线，默认是ease animation-delay 规定动画何时开始，默认是0 animation-iteration-count 规定动画被播放的次数，默认是1.infinite表示无限次播放 浏览器兼容
IE10、Firefox以及Opera支持@keyframes规则和animation属性 Chrome和Safari需要前缀-webkit- IE9以及更早的版本，不支持@keyframes规则或animation属性。 关注下面的标签，发现更多相似文章
CSS
Devil lv-1 发布了 24 篇专栏 · 获得点赞 46 · 获得阅读 1,952 关注 安装掘金浏览器插件 打开新标签页发现好内容，掘金、GitHub、Dribbble、ProductHunt 等站点内容轻松获取。快来安装掘金浏览器插件获取高质量内容吧！
