This is a draft cheat sheet. It is a work in progress and is not finished yet.
Element Selectors
* |
通配符选择器 |
匹配所有标签 |
E |
元素选择器 |
匹配元素是E的标签 |
#id |
id 选择器 |
按照id 匹配 |
.class |
类选择器 |
按照class匹配 |
E, F |
|
选择既是E的元素，又是F的元素 |
Relationship Selectors
E F |
后代选择器 |
E 下面所有F 的标签，无论是否直系 |
E > F |
子选择器/ 直接后代选择器 |
E 下面直系F标签 |
E + F |
相邻兄弟选择器 |
跟E 相邻的同层级的F标签 |
E ~ F |
通用兄弟选择器 |
无需跟E相邻的同层级F标签 |
Attribute Selectors
[att] |
带有att 属性的元素 |
[att="val"] |
带有 att 属性，并且属性值为val 的元素 |
[att^="val"] |
带有att属性，并以val 开头的元素 |
[att$="val"] |
带有att属性，并以val 结尾的元素 |
[att*="val"] |
带有att属性，且属性值包含“val” 的元素 |
[att~="val"] |
带有att属性，该属性的多个分隔值中至少匹配一个“val” |
[att|="val"] |
带有att属性，并且属性值为“val”或以“val-”为前缀 |
|
|
Backgrounds
background |
background-image | background-position | background-size | background-repeat | background-attachment | background-origin | background-clip | background-color |
background-origin |
border-box | padding-box | content-box |
background-position |
top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right | x-% y-% | x-pos y-pos |
background-attachment |
scroll | fixed |
background-break |
bounding-box | each-box | continuous |
background-clip |
length | % | border-box | padding-box | content-box| no-clip |
|
