网站弹广告是什么样做的,单位网址怎么编,手机网页游戏平台,移动互联网应用程序开发文章目录 一文讲清楚CSS3新特性1. 新增选择器特性2. 新增的样式3. 新增布局方式 一文讲清楚CSS3新特性 
1. 新增选择器特性 
层次选择器(div~p)选择前面有div的p元素伪类选择器 :first-of-type 表示⼀组同级元素中其类型的第⼀个元素:last-of-type 表示⼀组同级元素中其类型的最… 
 文章目录
 - 一文讲清楚CSS3新特性
 - 1. 新增选择器特性
 - 2. 新增的样式
 - 3. 新增布局方式
 
 
  
 
一文讲清楚CSS3新特性
 
1. 新增选择器特性
 
- 层次选择器(div~p)选择前面有div的p元素
 - 伪类选择器 
- :first-of-type 表示⼀组同级元素中其类型的第⼀个元素
 - :last-of-type 表示⼀组同级元素中其类型的最后⼀个元素
 - :only-of-type 表示没有同类型兄弟元素的元素
 - :only-child 表示没有任何兄弟的元素
 - :nth-child(n) 根据元素在⼀组同级中的位置匹配元素
 - :nth-last-of-type(n) 匹配给定类型的元素,基于它们在⼀组兄弟元素中的位置,从末尾开始计数
 - :last-child 表示⼀组兄弟元素中的最后⼀个元素
 - :root 设置HTML⽂档
 - :empty 指定空的元素
 - :enabled 选择可⽤元素
 - :disabled 选择被禁⽤元素
 - :checked 选择选中的元素
 - :not(selector) 选择与 不匹配的所有元素
 
  - 属性选择器
 - [attribute*=value]:选择attribute属性值包含value的所有元素
 - [attribute^=value]:选择attribute属性开头为value的所有元素
 - [attribute$=value]:选择attribute属性结尾为value的所有元素
 
 
2. 新增的样式
 
- border-radius,设置圆角边框
 - border-image,设置图片边框
 - box-shadow,为元素添加阴影
 - background-clip,确定背景画区
 - background-origin,设置图片的左上角对齐方式
 - background-size,设置背景图片的大小
 - background-break,设置背景分裂的方式
 - word-wrap,设置单词的换行方式,normal,整词换行;break-word,词内换行
 - text-overflow,设置文本溢出的显示方式,clip,截断;ellipsis,截断并用…代替
 - text-shadow,添加文本阴影
 - text-decoration,text-fill-color,设置文字内部填充颜色;text-stroke-color;设置文字边界填充颜色;text-stroke-width,设置文字边界宽度
 - 新增rgba颜色方式,=RGB+opacity
 - 新增hala颜色方式,h为色相,s为饱和度,l为亮度,a为透明底
 - transition过度,transition:css属性,花费时间,效果曲线,延迟时间;css属性=transition-property;花费时间=transition-duration;效果曲线=transition-timing-function;延迟时间=transition-delay
 - transform变化 
- translate(px,px)位移
 - scale(1,03)缩放
 - rotate(02.turn)旋转
 - skew(30deg,20deg)倾斜
 
  - animation动画 
- animation-name:动画名称
 - animation-duration:动画持续时间
 - animation-timing-function:动画时间函数
 - animation-delay:动画延迟时间
 - animation-iteration-count:动画执行次数
 - animation-direction:动画执行方向
 - animation-play-state:动画播放状态
 - animation-fill-mode:动画填充模式
 
  - linear-gradient线性渐变
 - radial-gradient景象线变
 
 
3. 新增布局方式
 
- 包括flex布局,Grid布局,媒体查询等, 看我的这几篇文章
 - https://blog.csdn.net/xiaobangkeji/article/details/144829721
 - https://blog.csdn.net/xiaobangkeji/article/details/144834010
 - https://blog.csdn.net/xiaobangkeji/article/details/144835580
 - https://blog.csdn.net/xiaobangkeji/article/details/144852599