前端小知识（9）--选择器

CSS选择器

选择符类型

1. 标签选择器（span，div，h1)
2. 类选择器（.className），一个元素可以有多个类名
3. id选择器（#idName)
4. 结构选择器
   1. > 只包含子元素
   2. ~ 兄弟元素
   3. + 相邻兄弟元素
   4. 空格 后代选择器，包含所有子孙元素
5. 属性选择器，例如p[gender='man']
   • p[name^='abc'] 以abc开头的
   • p[name$='abc'] 以abc结尾的
   • p[name*='abc'] 含有abc子字符串的
   • p[name~='abc'] 含有abc这个单词的，需要与其他字符隔开
6. 伪类选择器
   1. a:link 链接默认
   2. a:visited 已点击过
   3. a:hover 悬浮
   4. a:active 点击的时候
   5. a:focus-within 当该元素或者是子孙元素获得焦点时，一个比较有趣的实现 传送门
   6. :root 根选择器
   7. p:empty content为空
   8. div:first-child 第一个子元素
7. css3新增伪类选择器（常用）
   1. h1:first-of-type 第一个h1标签元素
   2. h1:last-of-type 最后一个h1标签元素
   3. div:last-child 最后一个子元素
   4. :nth-child(n) 选择第n个元素（n=1,2...)
   5. nth-last-child(n) 选择最后n个元素（n=1,2...)
   6. p:nth-type-of(n) 选择第n个p元素（n=1,2...)
   7. p:nth-last-type-of(n) 选择最后第n个p元素（n=1,2...)
   8. :not() 非，在前面选择器的基础上排除满足条件的元素
   9. :enabled 表单控件的可用状态
   10. :disabled 表单控件的禁用状态
   11. :checked 单选框或复选框被选中
   12. :target 活动的锚点
8. 伪元素选择器
   1. ::first-letter 文本首字符
   2. ::first-line 文本首行
   3. ::before 元素之前
   4. ::after 元素之后

参考

1. https://www.bilibili.com/video/BV1J4411D7sQ
2. https://www.cnblogs.com/TMM-eng/p/9182042.html