选择器（二）

伪类选择器（不存在的类，或者特殊的类）    

     -伪类用来描述一个元素的特殊状态
     比如：第一个子元素、被点击的元素、鼠标移入的元素
     
1)设置鼠标悬停在元素上时的样式
2）为已访问和未访问的链接设置不同的样式
3）设置元素获得焦点时的样式

一：动态伪类

1.    link:设置没访问过的链接的状态
2.    visited 设置访问过的链接的状态
3.    hover :设置鼠标滑过的状态
4.    active :设置鼠标点击时的状态
5.    focus ：适用于表单，获取焦点的元素。当用户点击元素、触摸元素或通过键盘的“tab"键方式选择元素时，就会获得焦点。

visited 和 link只能给a标签绑定
但是hover和active可以给别的元素绑定

二：结构伪类

 -伪类一般情况下都是用：开头
     ：first-child 第一个子元素
     ：last-child 最后一个子元素
     ：nth-child（表达式） 任意一个子元素
      里面的表达式是an+b的形式。  
      特殊值：
            n 第n个的范围0到正无穷
           2n或者even表示所有选择的偶数位元素
           2n+1 或odd表示选择奇数位的元素
     -以上这些伪类都是根据所有的子元素进行排序
   : first-of-type
   : last-of-type
   :nth-of-type()
            -这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序
    ：not()否定伪类
         -将符合条件的元素从选择器中去除
   几个特别的伪类
    ：only-chird 只有它自己(独生子女）
    ：only-of-type 同类型只有它自己
    ：root选中的是根元素
    ：选中的是没有内容的div
举例说明：

案例一：

绿框代表的是first-child的选择范围，蓝色是div>p的选择范围

 运行的结果是：

没有元素被选中，原因是：first-child的表示的是元素div的选则范围，且div的第一个元素的span,

div>p的选中范围是蓝色框选择的范围。这两个范围不一致。所以没有被选中的元素。 

 div>p代表的是div中是p子元素，而first-child的范围是div中所有的子元素，取两个的交集不满足所以没有显示。

假如我们要把张三给选中的话：将first-child转换成first-type

 

案例二：

张三选中的原因是它满足div的后代和marquee的第一个孩子。

测试二和张三选中的原因是，测试二是div的第一个孩子，张三是marquee的第一个孩子。

 

选中div中只有一个孩子的div元素

结果是测试一被选中

 
 测试一被选中

三：UI伪类

四：目标伪类

 

五：语言选择器

伪元素选择器

表示页面中一些特殊的并不真实存在
伪类表示特殊状态，伪元素表示特殊位置。
::first-letter 表示第一个字母
::first-line 表示第一行被选中
::selection:表示选中的内容
::placeholder input框的提示文字
::before 元素的开始
:: after 元素的最后
   -before 和 after必须结合content属性来使用
可以用before和after来向标签开头和结尾来添加

例 p::first-letter{ 
   font-size:50px;}

   p::first-line{
  background-color:yellow;}

   p::selection{
   background-color:yellow;}
   
   div::before{
        content:'abc’;
        color:red;
 }
    div::after{
       content:'haha';
       color:blue;
}