前端学习笔记(六)

第六章：选择器高级和伪类

一.选择器

    1.E,F 多元素选择器

        div,p,span,a{color:red;}
        E > F 子元素选择器
        顾名思义就是只选择器他的子元素！只认儿子，这种选择器一般是不想影响后面的元素而使用的比较多！
        E + F 毗邻元素选择器
        选择后面的一个兄弟元素
        div + p{background:red;}
        div p + p{background:blue;}

    2.属性选择器

        用元素属性来选择元素
        [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的元素

二.伪类

    1.伪类选择器

        我们没有给某个元素定义类名 可以通过样式的方式给某些选择器添加特殊的效果,实际上就是 某些标签css内部本身赋予它一些特性和功能，拿过来加以运用
        针对a标签两个伪类
        :link 规定未被点击的a标签的颜色
        :visited 匹配所有已被点击的颜色
        适用于所有元素
        :active 匹配按住不放的元素
        :hover 匹配鼠标滑过的元素
        hover伪类的扩展
        div：hover{}/*选择自己本身*/
        div p：hover a{}/*后代元素如何选中*/
        div + p：hover a{}/*兄弟元素如何选中*/

    2.伪元素

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