09 第九章 百花齐放的选择器

伪类选择器 用于向某些选择器添加特殊的效果。
锚伪类 :
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

link 未被点击的链接
visited 已被点击的链接
active 选定的时候
hover 鼠标悬停的时候

  div：hover{}/*选择自己本身*/
  div p：hover a{}/*后代元素如何选中*/
  div + p：hover a{}/*兄弟元素如何选中*/

结构性伪类选择器 根据嵌套结构选择元素(用起来还是很舒服的,但是属于css3部分,低版本浏览器不兼容)

1.  li:first-of-type{background:red;}
    /*选择父元素里面的第一个li元素 无视其他元素*/
    <ul>
        <li>小明</li>
        <li> 小王
    <ul>
        <li>小绿</li>
    </ul>
        </li>
    </ul>
   

2.  li:last-of-type{background:blue;}
    /*选择父元素里面的倒数第一个li元素 无视其他元素*/
   

3.  p:only-of-type{background:;}
    /*选择父级元素里面唯一的p 可以存在其他子元素*/
    <div>
    <span></span>
    <p></p>
    <span></span>
    </div>
   

4.  li:first-child{background:;}
    /*选择父元素的第一个元素 并要求第一个元素为li*/
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
   

5.  li:last-child{color:;}
    /*选择父元素的倒数第一个元素 并要求这个元素为li */
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
   

6.  p:only-child{background:;}
    /*选择父元素中唯一的子元素p 不允许有其他子元素*/
   

---------------------------------------第二部分----------------------------------

7.  p:nth-of-type(2){background:;}
    /*选择父元素中第二个p元素 无视其他元素*/
    <div>
    p*2
    em
    span
    p*3
    </div>
   

8.  p:nth-last-of-type(2){bakcground:;}
    /*选择父元素中倒数第二个p元素 无视其他元素*/
   

9.  p:nth-child(2)
    /*选择父元素中第二个子元素 并要求此元素为p*/
    <div>
    span
    p*3
    </div>
   

10

    p:nth-last-child(2){background:;}
    /*选择父元素中倒数第二个子元素 并要求此元素为p*/
    <div>
    span
    p*3
    </div>

11

    p:not(.box){color:red;}
    /*选择除了.box之外的p*/
    <div>
    p*5
    </div>

12

    E：first-line
    表示E元素中的第一行

    E：first-letter
    表示E元素中的第一个字符

    E::selection{background:;}

伪元素选择器
通过样式的方式在元素后面添加内容 字面意思假的元素

    :before 元素内容里的最前面添加内容
    :after 元素内容里的最后面添加内容

::为了区分伪类
属性选择器 根据属性和属性值选择元素

[class]匹配所有具有class属性的元素
[class=’box’]匹配所有具有class属性并且值等于box的元素 不仅要
具备class属性 并且值也要
符合
img[src^='image'] 选择src属性以image开头的img标签
img[src$='png'] 选择src属性以png结尾的img标签