css权重问题

<style type="text/css">
        .b #c{
            color: blue;
        }
        .b .d{
            color: orange;
        }
        #a .d{
            color: red;
        }
        #a span{
            color: green;
        }
    </style>
div id="a" class="b">
  <span class="d" id="c">hello world</span>
  <span class="d">passwang</span>
</div>



为什么是红色的，求大佬解答#前端工程师#