选择器高级和伪类
一.选择器
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')';}
总结:
伪类和伪元素的根本区别在于:它们是否创造了新的元素