优先级问题

来源：4-8 课程总结

HyperCoder

2017-04-17 16:32:11

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
            * {
                margin:0;padding:0;
            }
            .big{
                margin-top:100px;
                width:180px;
                border:1px solid gray;
                margin:0 auto;
                text-align:center;
            }
            h3{
                border-top:1px solid gray;
                border-bottom:1px solid gray;
                background-color:lightgray;
                padding:10px;
            }
            li {
                list-style-type:none;
                padding:5px;
                display:none;
            }
            .div1:hover li,.div2:hover li,.div3:hover li{
                display:block;
            }
        </style>
    </head>
    <body>
    <div>
        <div>
            <h3>家电</h3>
            <ul>
                <li>冰箱</li>
                <li>洗衣机</li>
                <li>空调</li>
            </ul>
        </div>
        <div>
            <h3>洗护</h3>
            <ul>
                <li>洗衣液</li>
                <li>消毒液</li>
                <li>柔顺剂</li>
            </ul>
        </div>
        <div  class="div3">
            <h3>衣物</h3>
             <ul>
                <li>衬衫</li>
                <li>裤子</li>
                <li>卫衣</li>
            </ul>
        </div>
      </div>
</body>
</html>

以上代码实现了作业要求的效果，但我在class为big的规则里面加了句margin-top:100px;却没有生效，需要使用!important或者写到style属性才会生效。这句规则中并没有与其他规则冲突，并且通过浏览器的调试工具发现是生效的（虽然不能按预想的那样体现在页面上），为了搞清原理，请老师回答一下，谢谢。

写回答

1回答

小于飞飞

2017-04-17

已采纳

你好，代码分析如下：

.big{
     margin-top:100px;
     width:180px;
     border:1px solid gray;
     margin:0 auto;
     text-align:center;
 }

margin-top:100px; 上边距为100 px , 注意在下面又设置了一遍，margin:0 auto; 上下为 0，如把margin-top:100px; 放在该语句的后面，就起作用了，后面的覆盖了前面的相同样式。希望对你有帮助，祝学习愉快。

hyperCoder

h 原来是我观察力不行...

h017-04-17

共1条回复

0 学习 · 36712 问题

查看课程

相似问题

*｛margin：0 padding：0｝设定问题

回答 2

为何代码跟老师一样还是有问题啊？

回答 6

行内样式不是应该优先于内部样式吗

回答 1

min-width优先级

回答 2

打开慕课网App查看更多内容