css 优先级问题 #id.class

Question

鼠标移入移出的时候改变样式。
当鼠标移入的时候添加className .onmouse ,
鼠标移出的时候删除这个class。
因为要改变div中已定义的样式。所以首先想到的方法是在 .onmouse 的样式加 !important 如注释。
但是看别人代码发现是用的 #div1.onmouse ；
想问问 #div1.onmouse 是什么意思。为什么优先级比 #div1 要高？
ok.
更新。。是因为权重可以加？所以 #div1.onmouse 优先级更高吗？（忽然想起这个-）
// #div1.onmouse 之间没有空格，不是后代选择器。
感谢！

<style type="text/css">

        #div1{

            box-sizing: border-box;

            width: 200px;

            height: 200px;

            margin: 0 auto;

            padding: 30px;

            border: 10px solid black;

            text-align: center;

            font-size: 12px;

            color: #fff;

            background: black;

        }

        #div1.onmouse{

            border: 10px solid red;

            background: #f0f0f0;

            color: red;

        }

        /*

        .onmouse{

            border: 10px solid red!important;

            background: #f0f0f0!important;

            color: red!important;

        }

        */

    </style>

    

Answer 1

因为权值可以相加。类选择器权值是10的话，类选择器权值是100，所以#div1.onmouse权值比#div1高