标签：伪类 元素 基础 nth child 选择器 CSS first
选择器
| 选择器 | 描述 |
|---|---|
| * | 选择所有 |
| 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：大写罗马数字。
标签：伪类,元素,基础,nth,child,选择器,CSS,first 来源： https://www.cnblogs.com/rchang/p/15562316.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。