:hover和 :hover(前面多一个空格)的区别

:hover 表示所选择元素的整个元素

而 :hover(前面多一个空格)表示所选择的元素的子元素才起作用（本身不起作用）

//html
<div class="demo">
      <span class="demo1">111</span>
      <span class="demo">222</span>
</div>
//css
.demo  {
  background-color: #fd7d8c;
  margin-left: 20px;
}
.demo:hover  {
  background-color: #2911fc;
}
/*.demo :hover  {
  background-color: #2911fc;
}  */

.demo:hover

  1. ** 正常情况下**
  1. 鼠标悬浮在主demo上（当子元素有相同名称时，不会被选择到）
  1. 鼠标悬浮在右上角子demo上

.demo :hover（前面多一个空格）

  1. 鼠标悬浮在主demo上（此时是主元素demo是没有悬浮效果的）

  2. 鼠标悬浮在子元素上（不一定要同名 只要是demo的子元素即可）

​

总结

不只是hover 其它伪类和伪元素也是一样的，其实在css选择器中空格就代表是选择子元素，像平时用的 .class1 .class2,是选择到class1中的子元素class2。以此类推！