Basics
选择器
.class {
font-weight: bold;
}
| Selector |
Description |
div |
Element |
.class |
Class |
#id |
ID |
[disabled] |
Attribute |
[role="dialog"] |
Attribute |
关系选择器
| Selector |
Description |
.parent .child |
Descendant |
.parent > .child |
Direct descendant |
.child + .sibling |
Adjascent sibling |
.child ~ .sibling |
Far sibling |
属性选择器
| Selector |
Description |
[role="dialog"] |
= Exact |
[class~="box"] |
~= Has word |
[class|="box"] |
|= Exact or prefix (eg, value-) |
[href$=".doc"] |
$= Ends in |
[class*="-is-"] |
*= Contains |
伪类选择器
| Selector |
Description |
:target |
eg, h2#foo:target |
:disabled |
|
:focus |
|
:active |
|
:nth-child(3) |
3rd child |
:nth-child(3n+2) |
2nd child in groups of 3 |
:nth-child(-n+4) |
|
:nth-last-child(2) |
|
:nth-of-type(2) |
|
伪类扩展
| Selector |
:first-of-type |
:last-of-type |
:nth-of-type(2) |
:only-of-type |
:first-child |
:last-child |
:nth-child(2) |
:only-child |
Fonts
属性
| Property |
Description |
font-family: |
<font>, <fontN> |
font-size: |
<size> |
letter-spacing: |
<size> |
line-height: |
<number> |
font-weight: |
bold normal |
font-style: |
italic normal |
text-decoration: |
underline none |
text-align: |
left right center justify |
text-transform: |
capitalize uppercase lowercase |
速记
font: |
italic |
400 |
14px |
/ |
1.5 |
sans-serif |
| |
style |
weight |
size (required) |
|
line-height |
family (required) |
示例
font-family: Arial;
font-size: 12pt;
line-height: 1.5;
letter-spacing: 0.02em;
color: #aa3322;
Case
text-transform: capitalize; /* Hello */
text-transform: uppercase; /* HELLO */
text-transform: lowercase; /* hello */
Background
属性
| Property |
Description |
background: |
(Shorthand) |
background-color: |
<color> |
background-image: |
url(...) |
background-position: |
left/center/right top/center/bottom |
background-size: |
cover X Y |
background-clip: |
border-box padding-box content-box |
background-repeat: |
no-repeat repeat-x repeat-y |
background-attachment: |
scroll fixed local |
速记
background: |
#ff0 |
url(bg.jpg) |
left |
top |
/ |
100px auto |
no-repeat |
fixed; |
background: |
#abc |
url(bg.png) |
center |
center |
/ |
cover |
repeat-x |
local; |
| |
color |
image |
positionX |
positionY |
|
size |
repeat |
attachment |
多背景
background:
linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('background.jpg') center center / cover,
#333;
Animation
属性
animation: |
(shorthand) |
animation-name: |
<name> |
animation-delay: |
<time>ms |
animation-duration: |
<time>ms |
animation-direction: |
normal reverse alternate alternate-reverse |
animation-iteration-count: |
infinite <number> |
animation-timing-function: |
ease linear ease-in ease-out ease-in-out |
速记
animation: |
bounce |
300ms |
linear |
100ms |
infinite |
alternate-reverse |
| |
name |
duration |
timing-function |
delay |
count |
direction |
示例
animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
事件
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')