重新整理了组织工作时用过的CSS3特性。
优先示例
value1~value2p~ul 优先选择p原素里头的ul [attribute^=value]a[src^=”https”] 优先选择其 src 特性值以 “https” 结尾的每一 <a> 原素 [attribute$=value]a[src$=”.pdf”] 优先选择其 src 特性以 “.pdf” 结尾的大部份 <a> 原素 [attribute*=value]a[src*=”abc”]优先选择其 src 特性中包涵 “abc” 子树的每一 <a> 原素 :first-of-typep:first-of-type 优先选择归属于其子原素的第一个 <p> 原素的每一 <p> 原素 :last-of-typep:last-of-type优先选择归属于其子原素的最终 <p> 原素的每一 <p> 原素 :only-of-typep:only-of-type优先选择归属于其子原素惟一的 <p> 原素的每一 <p> 原素 :only-childp:only-child优先选择归属于其父原素的惟一子原素的每一 <p> 原素 :nth-child(n)p:nth-child(2)优先选择归属于其子原素的第三个子原素的每一 <p> 原素 :nth-last-child(n)p:nth-last-child(2)上列,从最终两个子原素已经开始算数 :nth-of-type(n)p:nth-of-type(2)优先选择归属于其子原素第三个 <p> 原素的每一 <p> 原素 :nth-last-of-type(n)p:nth-last-of-type(2) 上列,但从最终两个子原素已经开始算数 :last-childp:last-child优先选择归属于其子原素最终两个子原素每一 <p> 原素 :root:root 优先选择文件格式的根原素 :emptyp:empty 优先选择没子原素的每一 <p> 元素(主要包括文档结点) :target#news:target优先选择现阶段公益活动的 #news 原素 :enabledinput:enabled 优先选择每一投入使用的 <input> 原素 :disabledinput:disabled优先选择每一停止使用的 <input> 原素 :checkedinput:checked优先选择每一被选上的 <input> 元素 :not(selector):not(p)优先选择非 <p> 原素的每一原素 ::selection::selection优先选择被使用者挑选出的原素部份动画电影 animation
@keyframes 让开发者通过指定动画电影中特定时间点必须展现的关键帧样式,来控制CSS动画电影的中间环节
animation: name duration timing-function delay iteration-count direction; animation-name 规定需要绑定到优先示例的 keyframe 名称。。 animation-duration 规定完成动画电影所花费的时间,以秒或毫秒计。 animation-timing-function 规定动画电影的速度曲线。 animation-delay 规定在动画电影已经开始之前的延迟。 animation-iteration-count 规定动画电影应该播放的次数。 animation-direction 规定是否应该轮流反向播放动画电影。 @keyframes animation-name {keyframes-selector {css-styles;}}animationname 定义动画电影的名称 keyframes-selector 动画电影时长的百分比。合法的值:0-100%from(与 0% 相同)to(与 100% 相同) css-styles 必需。两个或多个合法的 CSS 样式特性animation-fill-mode– none 默认值,回到初始状态 – forwards 当动画电影完成后,保持最终两个特性值 – both 根据animation-direction轮流应用forwards和backwards规则 – backwards 在 animation-delay所指定的一段时间内,在动画电影显示之前,应用已经开始特性值(在第一个关键帧中定义)。animation-play-state– running 播放 – paused 暂停