CSS选择器--CSS3知识图谱

选择器

1. 基础类选择器

   1. ele 元素选择器
   2. .class
   3. #id
   4. * 通配

2. 元素相关选择器

   1. div p 空格 后代选择器
   2. div>p > 父子选择器
   3. div+p + 第一个亲弟弟选择器(同一个爹且必须是第一个亲弟)
   4. div~p ~ 所有亲弟弟选择器(同一个爹)
   5. div，p , 多元素选择器

3. 属性相关选择器

   1. [color] 带有color属性的所有元素
   2. [color="red"] 属性值选择器，选择color="red"的所有元素
   3. [class~="className2"] 包含单词选择器，选择class属性包含单词"className2"的所有元素。
      (谨记一定是包含单词 单词 单词 ，重要的事情说三遍)
      例如：有的元素类名是class="className1 claseName2"时可以选择一个类名className2

   4. 子串属性选择器

      1. [color^="re"] 开头选择器
      2. [color$="ed"] 结尾选择器
      3. [color*="ee"] 包含子串选择器
         注意和[class~="className2"] 包含单词属性选择器区别,~=必须包含单词，*=不必是单词
   5. [lang|="en"] 特定属性开头选择器
      这个与[color^="re"] 开头选择器的区别是什么(还是没搞懂他们真正区别)？？？个人觉得是|=必须单词开头，^=不必是单词

4. 第n个选择器

   1. nth-选择器

   2. :nth-child(n) 匹配属于其父元素的第 N 个子元素,不论元素的类型
   3. :nth-last-child(n) 匹配属于其父元素的第 N 个子元素，但是从最后一个子元素开始计数，不论元素的类型
   4. :nth-of-type(n) 匹配属于其父元素的特定类型的第N个子元素的每个元素
   5. :nth-last-of-type(n) 同上，但最后一个子元素开始计数

      补充小知识，nth-就是第几个的意思，带type就是要论元素类型的，哎！吃了英语不好的亏。
      比较:nth-child(n),nth-of-type(n)这个很容易，前者是第n个子元素不论元素类型的;后者特定类型子元素的第n个。

      首尾选择器

   6. :first-of-type 匹配属于其父元素的特定类型的首个子元素的每个元素(注意：特定类型且是首个元素里的每个元素，意思就是包含首个元素里面的所有元素)
   7. :last-of-type 同上，特定类型最后一个元素的包含的每个元素
   8. :first-child 匹配其父元素首个子元素的每个元素
   9. :last-child 同上，最后一子元素的每个元素
   10. :only-child 匹配其父元素的唯一的子元素

5. 伪类选择器

   1. a标签相关

   2. :link 未访问
   3. :visited 已访问
   4. :hover 鼠标悬停
   5. :active 被鼠标按着时

      顺序LVHA（记忆LOVE HA），为什么是这个顺序了？
      本质是同等优先权的样式，写在后边的会覆盖前边。
      前两者的状态是常态，后2者是即时状态，当即时状态触发时，要覆盖常态，所以2个即时状态要放在后边。
      因为在常态下：如果a标签被访问过后，就要呈现被访问过得状态，所以visited要放在link后边，
      因为鼠标按下时，伴随着悬停的a标签上，所以要想active覆盖hover，就必须把active放在后面

   6. :focus 键盘焦点
   7. :first-child 元素第一个子元素
   8. :lang() 指定lang属性的元素添加样式

6. 伪元素选择器

   1. ::before 在某元素之前插入内容
   2. ::after 在某元素之后插入内容
   3. ::first-letter 将特殊的样式添加到文本的首字母
   4. ::first-line 将特殊的样式添加到文本的首行

7. 其他选择器(按我常用排序)

   1. :disabled 选择每个禁用的input
   2. :enabled 选择每个启用的input
   3. :checked 每个被选中的input
   4. :not(a) 选择非元素的每个元素
   5. ::selection 选择被用户选取的元素部分(这个牛逼，可以操作用户选择元素的部分)
   6. :empty a:empty 选择没有子元素的每个元素(包括文本节点)
   7. :target #news:target 选择当前活动的#news元素(这个可以做tabq切换)
   8. :root 选择文档的根元素