浅谈css选择器

对于一个正在逆战班学习的小白来说，css选择器大致有ID选择器、CLASS选择器（类选择器）、标签选择器（TAG选择器）、群组选择器（分组选择器）、通配选择器、层次选择器和伪类选择器等等选择器。

一.ID选择器

1. 在一个页面中，ID可以出现多次，但ID是具有唯一值的；例：
   
   2.命名规范：
   常规：leftsidebar
   驼峰式：leftSideBar
   下划线式: left_side_bar
   短线式：left-side-bar ( W3C推荐的写法 )
   还有少数人喜欢这样去写：left-side_bar
   

二.CLASS选择器（类选择器）

1.class选择器是可以复用的，复用代码的能力非常强；这与ID选择器是有很大区别的。
２.可以添加多个class样式，通过空格隔开。

3.命名规范：
与ID选择器的命名规范相同，常规式、驼峰式、下划线式、短线式及少数人的写法。

4.在多个样式的时候，样式的优先级根据css决定，而不是class属性中的样式决定。

三.标签选择器（TAG选择器）

标签选择器，一般使用的地方是在去掉某一些标签的默认样式。例：

四.群组选择器（分组选择器）

可以将不同的标签，但css样式相同的写在一起。

五.通配选择器

该选择器一般使用的场景：需要去掉所有标签的默认样式。

六.层次选择器

• 后代 : M N：找M下的所有N
  
• 父子 : M > N： 找M下的子标签N
  
• 兄弟 : M ~ N，相邻兄弟: M + N
  特点： ~ 是找M标签下面的所有N标签
• 是找M标签下相邻的N标签
  无论用~ + 都是找下面的兄弟，上面的兄弟是不会有任何作用的。

七.伪类选择器

1.CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
主要这四个伪类是针对a标签的
:link 访问前的选择器 ( 只能加给a标签 )
:visited 访问过后的选择器 ( 只能加给a标签 )
:hover 鼠标移入的选择器 ( 所有标签都能添加 )
:active 鼠标按下的选择器 ( 所有标签都能添加 )
2.注意：
a标签如果四个伪类都添加的话，那么是有顺序的 L V H A
一般的网站都只会设置a{ color:red;} a:hover{ color:blue;}
3.其他伪类选择器：
:before :after ( 特点，不用单独在创建一个标签，就可以给文本添加样式 )
input:checked{ width:100px; height:100px;}
input:disabled{ width:100px; height:100px;}
当标签能够获取焦点的时候，会触发 :focus
input:focus{ background:Red;}
4.结构性伪类选择器：
父元素下的第几个子元素 :nth-of-type()、 :nth-child()
()中可以添加的值：number(第几个，从1开始) | n(表示一个0到无穷大的数)
代码与效果如下：


父元素下的第一个子元素 :first-of-type、 :first-child
代码与效果如下：


父元素下的最后一个子元素 :last-of-type、 :last-child
代码与效果如下：


父元素下唯一的一个子元素 :only-of-type、 :only-child
代码与效果如下：