:hover前面有空格和没有空格有不一样的效果

Posted 2020-07-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了:hover前面有空格和没有空格有不一样的效果相关的知识，希望对你有一定的参考价值。

最近在写一些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>