前端学习笔记(五)

选择器高级和伪类

一.选择器

    1.E,F 多元素选择器

    div,p,span,a{color:red;}

    2.E > F 子元素选择器

    顾名思义就是只选择器他的子元素！只认儿子，这种选择器一般是不想影响后面的元素而
    使用的比较多！

    3.E + F 毗邻元素选择器

    选择后面的一个兄弟元素
    div + p{background:red;}

    div p + p{background:blue;} /*指向div 下p标签下面的邻居 是p的标签*/

二.属性选择器

    用元素属性来选择元素

    [class]
    匹配所有具有class属性的元素
    [class='box']
    匹配所有具有class属性并且值等于box的元素 不仅要具备class属性 并且值也要符合
    [class~='box']
    匹配所有具有class属性 并且值等于box 或者包含box 包含的意思是一个class属性多个类名的时候适用 包含是一个属性多个值的时候，有一个值是我们要选择的属性的时候使用，并不是我们常常说的那种模糊匹配的意思！
    [class|='list']
匹配所有class属性 等于list 开头 或者以list开头的元素 这里说的“开头”要是第一个元素
    [href][class='abox']
匹配所有同时拥有href 和class属性 并且值等于abox的元素 满足三个条件
扩展：
[href][class~='abox']
匹配所有同时拥有href 和class属性。 并且值等于abox或者包含abox的元素

三.伪类

    伪类选择器
    我们没有给某个元素定义类名 可以通过样式的方式给某些选择器添加特殊的效果 实际上就是 某些标签css内部本身赋予它一些特性和功能，拿过来加以运用

    1.针对a标签两个伪类

    :link 规定未被点击的a标签的颜色
    :visited 匹配所有已被点击的颜色

    2.适用于所有元素

    :active 匹配按住不放的元素
    :hover 匹配鼠标滑过的元素
    hover伪类的扩展
    div：hover{}/*选择自己本身*/
    div p：hover a{}/*后代元素如何选中*/
    div + p：hover a{}/*兄弟元素如何选中*/

四.伪元素

    通过样式的方式在元素后面添加内容
    伪元素的由两个冒号::开头，然后是伪元素的名称 。
    使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，
    CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用
    两个冒号::
    :before 元素内容前面添加内容
    :after 元素后面添加内容
    /*在伪元素里面添加图片 content='' 必填*/
    ::after{content:'url('images/1.jpg')';}
    总结：
    伪类和伪元素的根本区别在于：它们是否创造了新的元素