Question

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：

.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

我很好奇的是，即使我在border上设置.myPanel，它也无效.myPanel .body，.myPanel .body周围没有边框，为什么？

Answer 1

这是你的问题：

.myPanel: {

只需删除：（冒号）

以下片段：

.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 个答案: