CSS的优先级别_html/css_WEB-ITnose

1、样式的优先级

    内联样式 > 内部样式 > 外部样式

    以下的特例：外部样式会覆盖内部样式（不推荐内联样式）

        div { background:red; }            
Hello World!

登录后复制

立即学习“前端免费学习笔记（深入）”；

2、选择器的优先权

    内联样式（1000）> id（100）> class（10）> tag（10）

    以下例子div将显示的背景色是黑色。

        #divId    { height:100px; background:black; }    .divClass { height:100px; background:green; }        
Hello World!

登录后复制

立即学习“前端免费学习笔记（深入）”；

    同理，之前遇到过一个问题：

        #divId    { height:100px; background:black; }    .divClass { height:100px; background:red; }        
    window.onload = function() {        var divId = document.getElementById("divId");        divId.className = "divClass";    };

登录后复制

    这时你会发现js的代码不起作用，相信你应该知道原因了吧。

    解决的方法有很多，以下说说两种：

    （1）如果需要修改的属性少，可以直接用js修改属性

window.onload = function() {    var divId = document.getElementById("divId");    divId.style.background = "red";};

登录后复制

    (2)当要修改的属性多，可以在外出加多一个有id的标签，让class的优先级高于当前div的id

        #divId    { height:100px; background:black; }    #boss .divClass { height:100px; background:red; }        
        
    
    window.onload = function() {        var divId = document.getElementById("divId");        divId.className = "divClass";    };

登录后复制

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；