选择器高级和伪类

一.选择器

    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’)’;}
总结：
伪类和伪元素的根本区别在于：它们是否创造了新的元素

打赏作者