Question

除了表格类中的颜色和位置之外，我有三个具有相同功能的圆圈，但在css中并没有将这些功能作为孩子。

  <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;
}

Answer 2

如果您不想修改HTML代码，可以试试这个：

.circles {
  & > div { // affect direct child div (circle-1,circle-2,circle-3)
   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;
   }
}

孩子和父母不工作

2 个答案: