jquery - child 和 parent 不工作

Question

我有三个圆圈，除了在表格类中的颜色和位置外，它们具有相同的特征，但在 css 中没有获得 child 的特征。

  <div class="table circles">
      <div class="circle-1"><span>text1</span></div>
      <div class="circle-2"><span>text2</span></div>
      <div class="circle-3"><span>text3</span></div>
   </div>

在 scss 中:

    .circle{
       width: 84px;
       height: 84px;
       display: inline-block;
       border-radius: 48px;

       .circle-1{
          box-shadow: 0 0 0 5px $b1;
          background-color:$b1;
       }
       .circle-2{
          box-shadow: 0 0 0 5px $b2;
          background-color:$b2;
          margin-left:150px;
       }
       .circle-3{
          box-shadow: 0 0 0 5px $b3;
          background-color:$b3;
          margin-left:300px;
       }
    }

有什么帮助吗？谢谢!

Answer 1

http://jsfiddle.net/ek505903/

看起来是 SCSS 代码，但是 HTML 中缺少 .circle 类。

<div class="table circles">
  <div class="circle circle-1"><span>text1</span></div>
  <div class="circle circle-2"><span>text2</span></div>
  <div class="circle circle-3"><span>text3</span></div>
</div>


.circle {
   width: 84px;
   height: 84px;
   display: inline-block;
   border-radius: 48px;
   text-align: center;
}

.circle span {
    /*to center the text vertically use the same value as .circle height*/
    line-height: 84px;
}

.circle-1{
  box-shadow: 0 0 0 5px black;
  background-color: red;
}

.circle-2{
  box-shadow: 0 0 0 5px black;
  background-color: green;
  margin-left:150px;
}

.circle-3{
  box-shadow: 0 0 0 5px black;
  background-color: yellow;
  margin-left:300px;
}