CSS3常用的属性有哪些

魁首哥

作者

CSS3常用的属性有哪些

这篇文章主要介绍“CSS3常用的属性有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS3常用的属性有哪些”文章能帮助大家解决问题。

选择器

value1~value2

p~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-type

p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素

:last-of-type

p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素

:only-of-type

p:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素

:only-child

p: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-child

p:last-child选择属于其父元素最后一个子元素每个<p>元素

:root

:root选择文档的根元素

:empty

p:empty选择没有子元素的每个<p>元素（包括文本节点）

:target

#news:target选择当前活动的#news元素

:enabled

input:enabled选择每个启用的<input>元素

:disabled

input:disabled选择每个禁用的<input>元素

:checked

input:checked选择每个被选中的<input>元素

:not(selector)

:not(p)选择非<p>元素的每个元素

::selection

::selection选择被用户选取的元素部分

动画 animation

@keyframes 让开发者通过指定动画中特定时间点必须展现的关键帧样式，来控制CSS动画的中间环节

animation:namedurationtiming-functiondelayiteration-countdirection;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所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。