HTMLタグで複数のセレクターを指定する際のCSSルールが知りたい

例えば、bootstrapの"container"classを利用して、以下のように記述すると、

CSS
1 .inner {
2        background-color: black;
3      }

html
1<div class="container inner">
2    テストテストテスト
3</div>

出力されるHTMLは、bootstrapのcontainerクラスが持つ、brakepointsごとのwidthの動きと、自分のCSSで指定したbackgraund-colorの両方が反映されます。

通常、HTMLでの、<div class="container inner">の指定の仕方は、

CSS
1 .container.inner {
2        background-color: black;
3      }

というように、2つのセレクタを空白無しで指定する方法と認識しているのですが、

①：2つのCSSクラスの記述が反映される
②：2つのセレクターを空白なしで指定する

この2つの働きがあるのが、CSSのルールと考えて良いのでしょうか？
それとも、Bootstrapを利用する際の特別な結果なのでしょうか？

下記のサイト等を参考にしていますが、
CSS 複数のセレクタを指定する/絞り込むサンプル

①：2つのCSSクラスの記述が反映されるの効果について説明されたものがなく、質問させてもらいました。

行動規範の内容に同意します

回答2件

html
1<div class="container inner">
2    テストテストテスト
3</div>

この要素に対しては

css
1.container {}
2.inner {}
3.container.inner {}

すべて有効です。上記のdivはcontainerクラスを持っていますし、innerクラスも持っています。
複数をつけた3つめだけが有効なわけではありません。
3つめの書き方は「複数クラスを持った要素にだけ」有効な書き方であって
上2つの書き方は「複数クラスを持った要素」に効かないわけではありません。
「指定したクラスを持った要素（他にどんなクラスが何個あるかは無関係）」に効く書き方です。

html
1<div class="container test">
2    テスト
3</div>
4<div class="inner test">
5    テストテスト
6</div>
7<div class="container inner">
8    テストテストテスト
9</div>