CSS选择器

兄弟选择器

• .box~p： .box同级所有的p都会被选择，且这些元素和第一个元素拥有同一个父元素（两个元素之间不一定要相邻)
  【用人话解释：.box和p之间存在一个短波浪线，波浪即代表流动，波浪线指明了从.box流动到p，在此期间所有的p省略不写，并以最后一个p作为结尾】
  
  
• .box+p：同级后第一个p【用人话解释：从先来后到的角度上讲，+后的p代表紧挨着.box第一个p】
  
  
  

属性选择器：

• E[attribute^=value] 用于选取带有以指定值开头的属性值的元素【用人话解释：^是<,>的变种，尖头不再指向左右而是指向头顶，所以是代表开头】
  
  

• E[attribute$=value] 用于选取属性值以指定值结尾的元素
  【用人话解释：$是美元符，美元来自美国，美国属于资本主义国家，而$代表末尾，也就是委婉的暗示了资本主义必然会走进终结的悲剧命运。】
  
  

• E[attribute*=value] 用于选取属性值中包含指定值的元素，位置不限，也不限制整个单词【用人话解释：代表全部，这就是为什么人们在游戏中公屏打脏话，然后只会显示一个****,*将所需要展示的汉字遮挡了，因此，在未公开的情况下，所产生的联想就会是无限的，即便它只有一个号，这就是所谓的一即全，全即一】
  
  
  

伪类选择器

• :root 选择文档的根元素，HTML 里，永远是元素
  【用人话解释：root为根，根为源，源头就是祖宗，html的祖宗便是html】
  
  

• :last-child 向元素添加样式，且该元素是它的父元素的最后一个子元素【用人话解释：child时孩子，last是最后，last-child就代表最后一个孩子，孩子为子元素，但如果要问为什么是父元素的最后一个子元素，那想必每一个父元素都希望自己的子元素是亲生的，即便是最后一个】
  
  

• :nth-child(n) 向元素添加样式，且该元素是它的父元素的第 n 个子元素【用人话解释：nth用汉语翻译是难听话，如果child多了，人多则事乱，child必然是很难听话，所以，在下达命令的时候需要特别的指定，n即证明需要指定哪一个child来听话 】

• :nth-last-child(n) 向元素添加样式，且该元素是它的父元素的倒数第 n 个子 元素【用人话解释：last从后面数，只是换了一个顺序】
  
  

• :only-child 向元素添加样式，且该元素是它的父元素的唯一子元素【用人话解释：唯一子元素，毕竟如果出现唯二子元素（即非直系血脉后辈）的话，那问题就比较棘手了】
  
  

• :first-of-type 向元素添加样式，且该元素是同级同类型元素中第一个元 素【用人话解释：type类型，第一类型不用过多解释】
  
  

• :last-of-type 向元素添加样式，且该元素是同级同类型元素中最后一个 元素【用人话解释：last最后】
  
  

• :nth-of-type(n) 向元素添加样式，且该元素是同级同类型元素中第 n 个元 素【用人话解释:根据英语意思就能推断出来了。】
  
  

• :nth-last-oftype(n)向元素添加样式，且该元素是同级同类型元素中倒数第 n 个元素
  
  

• :only-of-type 向元素添加样式，且该元素是同级同类型元素中唯一的元素

伪元素选择器

• :enabled 向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
  
  

• :disabled 向当前处于不可用状态的元素添加样式，通常用于定义表单的 样式或者超链接的样式
  
  

• :not(selector) 向不是 selector 元素的元素添加样式
  
  

• :target 向正在访问的锚点目标元素添加样式