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高