最近在写一些html样式发现:hover前面有空格和没有空格有不一样的效果，:hover前面没有空格，影响的只是该元素的兄弟节点；但是，如果前面有了一个空格，那效果就大大不一样了，有个空格影响的就是 该元素下面的 子节点了。
实例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 ul:hover{
8 color:red;
9 }
10
11 </style>
12 </head>
13 <body>
14 <ul>
15 <li>1</li>
16 <li>2</li>
17 <li>3</li>
18 <li>4</li>
19 <li>5</li>
20 </ul>
21 <ul>
22 <li>/</li>
23 <li>*</li>
24 <li>-</li>
25 <li>+</li>
26 <li>.</li>
27 </ul>
28 <ul>
29 <li>a</li>
30 <li>b</li>
31 <li>c</li>
32 <li>d</li>
33 <li>e</li>
34 </ul>
35 </body>
36 </html>
效果图：
但是如果在ul:hover{color:red;}中，ul与:hover中间有一个空格 比如这样：ul :hover{color:red;} 就会又不一样的效果，
实例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 ul :hover{
8 color:red;
9 }
10
11 </style>
12 </head>
13 <body>
14 <ul>
15 <li>1</li>
16 <li>2</li>
17 <li>3</li>
18 <li>4</li>
19 <li>5</li>
20 </ul>
21 <ul>
22 <li>/</li>
23 <li>*</li>
24 <li>-</li>
25 <li>+</li>
26 <li>.</li>
27 </ul>
28 <ul>
29 <li>a</li>
30 <li>b</li>
31 <li>c</li>
32 <li>d</li>
33 <li>e</li>
34 </ul>
35 </body>
36 </html>
效果图：
仔细观察的同学，你会发现这两张图片实现的效果是不一样的
第一张图片上的第二个ul的字体颜色变为红色，而第二张图片上只有第二个ul下的某个子节点的字体颜色变为红色了。
总结：ul:hover{color:red;}与ul :hover{color:red;}的区别，也就是第一个影响的是ul的兄弟节点，第二个影响的是ul的子节点。
也就是说:hover前面没有空格影响的是元素的兄弟节点，:hover前面有空格影响的就是元素的子节点了。
希望这篇文章对大家有所帮助，
到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
若有转载，请注明出处！！！
如果本文对你有帮助，请点下推荐，谢谢！
时间： 2024-12-23 00:48:59