css 优先级问题 #id.class

鼠标移入移出的时候改变样式。
当鼠标移入的时候添加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>
    

---

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

---

下列是一份 优先级逐级增加的 选择器列表：

1. 元素(类型)选择器（type selectors）（例如：h1）和 伪元素选择器（pseudo-elements）（例如：:before）

2. 类选择器（class selectors） (例如：.example)，属性选择器（attributes selectors）（例如：[type="radio"]），伪类选择器（pseudo-classes）（例如：:hover）

3. ID选择器（例如：#example）

参考：优先级- CSS | MDN