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的布局。

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