Front-end css classic: selector shorthand

1. Remember

/* 元素选择器 */
div {}
/* 类选择器 */
.box {}
/* ID 选择器 */
#id {}
/* 通配符 */
* {}
/* 群组选择 */
div,
span {}
/* 后代选择 */
div span {}
/* 子代选择 */
div > span {}
/* 伪类选择器：第一个子元素 */
div:first-child {}
/* 伪类选择器：最后一个子元素 */
div:last-child {}
/* 伪类选择器：第n个子元素，从 1 开始 */
div:nth-child(n) {}

2. Understand

/* 相邻兄弟 */
div + p {}
/* 所有兄弟 */
div ~ p {}