CSS边框不起作用

Question

HTML: HTML：

<body>
    <div><p>Something</p></div>
    <div class = "myPanel">
        <div class = "heading">my header</div>
        <div class = "body">my body</div>
    </div>
    <div><p>Something</p></div>
</body>

css: CSS：

.myPanel: {
    border: 1px solid #687D6D;
    border-radius: 5px 5px 0 0;
    box-shadow: 10px 10px 1px black;
    margin: 3%;
}
.myPanel .heading {
    background: #B6F0C4;
    border-radius: 5px 5px 0 0;
    color: #687D6D;
    padding: 10px 20px;
}
.myPanel .body {
    padding: 10px 20px;
}

JSFiddle JSFiddle

What I'm curious is that, even if I set border on .myPanel , it doesn't work on .myPanel .body , there's no border around .myPanel .body , why? 我很好奇的是，即使我设定border上.myPanel ，它不工作.myPanel .body ，还有无边框.myPanel .body ，为什么呢？

Answer 1

here is your problem: 这是你的问题：

.myPanel: {

just remove the : (colon) 只需删除:（冒号）

snippet below: 下面的代码段：

 .myPanel { border: 1px solid #687D6D; border-radius: 5px 5px 0 0; box-shadow: 10px 10px 1px black; margin: 3%; } .myPanel .heading { background: #B6F0C4; border-radius: 5px 5px 0 0; color: #687D6D; padding: 10px 20px; } .myPanel .body { padding: 10px 20px; }

 <div> <p>Something</p> </div> <div class="myPanel"> <div class="heading">my header</div> <div class="body">my body</div> </div> <div> <p>Something</p> </div>

CSS边框不起作用

问题描述

1 个解决方案

解决方案1
4 已采纳 2015-07-14 02:00:17

CSS边框不起作用

问题描述

1 个解决方案

解决方案1 4 已采纳 2015-07-14 02:00:17

解决方案1
4 已采纳 2015-07-14 02:00:17