javascript - 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高

这篇关于javascript - css 优先级问题 #id.class的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！