CSSのセレクタの指定に関して

レスポンシブウェブデザインを実装したく、添付コードの通り記載しているのですが、親要素を記載した場合、反映されたのですが、反映させたい子要素のクラス名の指定だけでは反映されませんでした(btn1およびbtn2の幅を変えようとした所、親要素のdddも指定しないと反映されまでした)。これはなぜでしょうか？

CSSでコードを書く際、例えば親要素Aの中に子要素Bがあり孫要素C１、C２があるとして、C1のフォントサイズを変えたい場合、セレクタの指定は.A.B.C1とする必要があるのでしょうか？　.C1のみでも反映される時があるのですが、この違いは何でしょうか？ご教授の程お願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <title>final practice</title>
9    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
10    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
11    <link href="css/aib.css" rel="stylesheet">
12
13</head>
14<body>
15
16    <div class="container p-4 ddd d-xl-none px-lg-5">
17        <p class="card-subtitle mb-1 dddd text-left">どれくらいの収入が見込めるかチェック</p><input type="text" class="border-light w-100">
18
19        <div class="d-flex dddd justify-content-between  flex-wrap">
20            <button type="button" class="btn  dropdown-toggle border-secondary  btn1" data-toggle="dropdown"
21                aria-haspopup="true" aria-expanded="false">
22                ドロップダウン
23            </button>
24
25            <button type="button" class="btn  dropdown-toggle   border-secondary btn2  " data-toggle="dropdown"
26                aria-haspopup="true" aria-expanded="false">
27                ドロップダウン
28            </button>
29        </div>
30
31        <h2 class="money dddd"> ¥80,000 </h2>
32        <div class="d-flex dddd  text-secondary">
33            <h5>月あたり</h5><span> <a class="text-secondary" href="#">?</a> </span>
34        </div>
35
36        <a href=""><button class="btn btn-danger w-100">はじめる</button></a>
37    </div>
38
39
40
41   
42</body>
43
44
45</html>

css
1* {
2  list-style: none;
3  box-sizing: border-box;
4}
5
6
7  
8
9
10.dddd{
11  margin: 1rem 0;
12}
13
14// RWD
15
16
17// lg
18@media  screen and (max-width: 1200px) {
19  .ddd {
20   padding: 0;
21
22    .btn1 {
23      width: 60%;
24    }
25    .btn2{
26      width: 35%;
27    }
28  }
29}   
30   
31
32
33// tablet
34@media screen and (max-width: 768px) {
35
36  .ddd {
37    .btn1 {
38      margin: 1rem 0;
39      width: 100%;
40    }
41    .btn2 {
42      margin: 1rem 0;
43      width: 100%;
44    }
45  }
46  
47}
48
49// smartphone
50@media screen and (max-width: 576px) {
51 dd {
52  .btn1 {
53    margin: 1rem 0;
54    width: 100%;
55  }
56  .btn2 {
57    margin: 1rem 0;
58    width: 100%;
59  }
60}
61}
62