CSS伪类和“+”选择器、“~”选择器结合运用下的作用对象

CSS伪类,相信大家都不陌生。它包含了link、visited、hover、active等四个选择器。下面我将结合自己的实际编码测试,来分析它们分别可以作用的对象。

1、不论是否结合“+”选择器和“~”选择器,link、visited只能作用于元素自身;

2、在不结合“+”选择器和“~”选择器的情况下,hover、active不仅可以作用于元素自身,同时也可以作用于元素的后代元素(即子级、孙级...只要是父级包含的元素即可);

顺带要提一下的是,在元素同时拥有link、visited、hover、active这四个选择器时,hover必须位于link和visited之后,否则hover会失效;而active必须位于最后,否则同样失效。

3、在结合“+”选择器的情况下,hover和active能够作用于同一个父级下的下一个同级元素,及其后代元素身上。比如下图中的四个块级元素:



当我们给father2:hover的时候,利用“+”选择器,可以将hover的作用加在father3或son3身上,但是不能加在father1、son1、father4、son4的身上。这是由于“+”选择器本身的性质导致的。

4、在结合“~”选择器的情况下,可以实现给father2:hover的时候,hover作用于father3、son3、father4、son4...的元素身上,同理也适用于active。所以在结合伪类作用时,“~”选择器比“+”选择器的功能更加强大了。

今后我们在使用hover或active时,可以先考虑一下需要实现何种效果,再进行html的布局。

如果你能看到这了..那说明你真是毅力惊人,——我写得都累了...好吧,本人是个前端小白,最近刚刚入坑,有时候会遇到一些小白级别的问题,网上没有相关资料的话,我会自己去编码测试,验证效果。以上就是我自己测试得来的,如果有不对的地方,希望有大牛能帮我指正~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 1,864评论 0 5
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 1.class 和 id 的使用场景? 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也...
    草鞋弟阅读 2,447评论 0 1
  • 1. class 和 id 的使用场景: id:id选择器,使用#name定义(name为id名,可任意取名),使...
    石林涛阅读 385评论 0 1
  • 1.class 和 id 的使用场景? 多个标签可以使用同一个class,一个id只能对应一个标签 2.CSS选择...
    molly的红草帽阅读 371评论 0 0