CSS 速查表 | Cheat Sheet

本文根据 Devhints / CSS 翻译。代码示例及版本范围沿用原文。

基础

选择器

.class {
  font-weight: bold;
}

选择器	说明
`*`	所有元素
`div`	元素
`.class`	类
`#id`	ID
`[disabled]`	属性
`[role="dialog"]`	属性

组合符

选择器	说明
`.parent .child`	后代
`.parent > .child`	直接后代（子元素）
`.child + .sibling`	相邻兄弟元素
`.child ~ .sibling`	后续兄弟元素
`.class1.class2`	同时拥有多个类

属性选择器

选择器	说明
`[role="dialog"]`	`=` 精确匹配
`[class~="box"]`	`~=` 包含特定单词
`[class\|="box"]`	`\|=` 精确匹配或前缀匹配（例如： `value-`)
`[href$=".doc"]`	`$=` 以……结尾
`[href^="/index"]`	`^=` 以……开头
`[class*="-is-"]`	`*=` 包含

伪类

选择器	说明
`:target`	例如： `h2#foo:target`
`:disabled`
`:focus`
`:active`
`:nth-child(3)`	第 3 个子元素
`:nth-child(3n+2)`	每 3 个元素中的第 2 个
`:nth-child(-n+4)`
`:nth-last-child(2)`
`:nth-of-type(2)`
`:checked`	已勾选的输入元素
`:disabled`	已禁用的元素
`:default`	组中的默认元素
`:empty`	没有子元素的元素

伪类变体

选择器
`:first-of-type`
`:last-of-type`
`:nth-of-type(2)`
`:only-of-type`
`:first-child`
`:last-child`
`:nth-child(2)`
`:only-child`

字体

属性

属性	说明
`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`

简写属性

	样式 (style)	字重 (weight)	大小 (size)（必填）		行高 (line-height)	字体族 (family)
`font:`	`italic`	`400`	`14px`	`/`	`1.5`	`sans-serif`
	样式 (style)	字重 (weight)	大小 (size)（必填）		行高 (line-height)	字体族 (family)（必填）

示例

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:`	（简写属性）
`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`

简写属性

	颜色 (color)	图像 (image)	positionX	positionY		尺寸	重复方式 (repeat)	附着方式 (attachment)
`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		尺寸	重复方式 (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-name:`	`<name>`
`animation-duration:`	`<time>ms`
`animation-timing-function:`	`ease` `linear` `ease-in` `ease-out` `ease-in-out`
`animation-delay:`	`<time>ms`
`animation-iteration-count:`	`infinite` `<number>`
`animation-direction:`	`normal` `reverse` `alternate` `alternate-reverse`
`animation-fill-mode:`	`none` `forwards` `backwards` `both` `initial` `inherit`
`animation-play-state:`	`normal` `reverse` `alternate` `alternate-reverse`

简写属性

	名称 (name)	持续时间 (duration)	时间函数 (timing-function)	延迟 (delay)	次数 (count)	方向 (direction)	填充模式 (fill-mode)	播放状态 (play-state)
`animation:`	`bounce`	`300ms`	`linear`	`100ms`	`infinite`	`alternate-reverse`	`both`	`reverse`
	名称 (name)	持续时间 (duration)	时间函数 (timing-function)	延迟 (delay)	次数 (count)	方向 (direction)	填充模式 (fill-mode)	播放状态 (play-state)

示例

animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;

事件

.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')