SASS特异性层次结构

Question

为什么下面的Div不会出现在按钮点击上？ 我如何解决它，而不是在第二课中使用！important？ 我也不想使用removeClass。

＆＃13;

＆＃13;

function run(){
   $('.one').addClass('two');
}

＆＃13;

.base{
  background-color:#FF0000;
  & .one{
    opacity:0;
    display:block;
    
    color:#FFF;
 }
 }
.two{
  opacity:1;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="base">
    <div class="one">
       Hello World!
    </div>
</div>
<button click="run()">Click me!</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

html应该是onclick而不是单击

＆＃13;

＆＃13;

function run(){
   $('.one').addClass('two');
}

＆＃13;

.one{
  opacity:0;
  display:block;
  background-color:#FF0;
  color:#FFF;
 }

.two{
  opacity:1;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
  Hello World!
</div>

<button onclick="run()">Click me!</button>

＆＃13;

＆＃13;

＆＃13;