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