前端中hover失效的问题——情况一

1，hover前加了空格或使用了中文冒号

css

.abc{
    margin: 10px 20px 30px 40px;
    padding: 40px 30px 20px 10px;
    width: 50px;
    height: 60px;
    position: relative;
    display: inline-block;
    background-color: blue;
}
.def{
    margin: 10px 20px 30px 40px;
    padding: 40px 30px 20px 10px;
    width: 50px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background-color: skyblue;
}
.abc:hover .def{
    display: inline-block;
}
.ghi{
    background-color: #fff;
    width: 50px;
    height: 60px;
}

html

  <div style="background-color: purple;display: inline-block;">
        <div class="abc"><div class="ghi"></div>
        <!-- 只是为了显示出盒子内容 -->
            <div class="def"></div>
        </div>
    </div>

这是一串正确的代码，作用是当鼠标移动到abc时会显示出def。 
但是如果将 
.abc:hover .def{display: inline-block;}改为.abc :hover .def{display: inline-block;} 
的话，该hover便会失去作用。

二、 active，visited，hover，link之间的关系

active < hover < visitied / link 
其意思就是active需定义在hover之后才能起作用，而hover需定义在visited和link之后才会起作用。当然，前提是它们同时存在的时候。