选择器
| 选择器 | 描述 |
|---|---|
| * | 选择所有 |
| element | 标签选择器 |
| #id | id选择器 |
| .class | 类 |
| .class1.class2 | 交集选择 |
| .class1 .class2 | 后代选择 |
| element,element | 并集选择 |
| element>element | 子一级选择 |
| element1+element2 | 1之后的首个2元素（同级） |
| element1~element2 | 1之后的所有2元素（同级） |
后代选择器 空格分隔
选择 子元素 >分隔
选择 下一个同级元素（相邻兄弟选择器） +
选择 同级元素（兄弟选择器） ~
选择优先级、权重（大覆盖小，权重相同后覆盖前）
| 选择器 | 权重 |
|---|---|
| 内联（HTML内） | 1000 |
| id | 0100 |
| class 伪类 | 0010 |
| 标签 | 0001 |
| 继承 | 0000 |
后代选择器（包含选择器）为权重之和
常见 伪类(Pseudo-classes)
selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
| 伪类 | 说明 |
|---|---|
| :first-child | 一组兄弟元素中的 第一个元素 |
| :first-of-type | 一组兄弟元素中 指定类型 的 第一个元素 |
| :last-child | 一组兄弟元素中的最后一个元素（类似 :first-child） |
| :last-of-type | 一组兄弟元素中指定类型的最后一个元素（类似 :first-of-type） |
| :not() | 否定选择括号中填的参数 |
| :nth-child(an+b) | 按位置匹配（首位为1） :nth-child(4) 匹配位置为 4 的元素 :nth-child(2n) 匹配位置为2、4、6、8... 的元素，可以使用 :nth-child(even) 代替 :nth-child(2n+1) 匹配位置为1、3、5、7... 的元素，可以使用 :nth-child(odd) 代替 :nth-child(3n) 匹配位置为 3、6、9... 的元素 |
| :nth-of-type | 与 nth-child 相似，不同之处在于它是只匹配特定类型的元素 |
常见 伪元素(pseudo-elements)
伪元素创建了不存在 DOM 树中的元素，并为其添加样式，在其内容后使用 content 添加内容。
| 伪元素 | 描述 |
|---|---|
| ::after | 选中元素的后一个元素 |
| ::before | 选中元素的前一个元素 |
| ::first-letter | 文字第一行开始至第一个字母 |
| ::first-line | 第一行文字 |
| ::selection | 文档中被用户高亮的部分 |
伪类、伪元素参考：
CSS 常用伪类和伪元素 - 边玉杰的文章 - 知乎
列表样式
无序列表
li圆点样式
li {list-style-type:符号名称}
符号名称可用的值为：
none：不使用项目符号。
disc：实心圆。
circle：空心圆。
square：实心方块。
demical：阿拉伯数字。
lower-alpha：小写英文字母。
upper-alpha：大写英文字母。
lower-roman：小写罗马数字。
upper-roman：大写罗马数字。