css Anzeige probleme in bootstrap4 .... und -> .test.teil oder .test .teil

[Reinhard]

Ich habe einige Probleme mit der Zuweisung bei CSS. So möchte ich den Hintergrund bei einer Einblendung eine MODAL Element bei BOOTSTRAP4 ändern. Das Element wird über

<div class="modal aendern fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

in der Bootstrap CSS findet man dazu

.modal-backdrop.show {
opacity: 0.5;
}

Um in diese CSS nicht zu verändern, mach ich das in meiner eigenen style.css

.modal-backdrop.show {
  opacity: 0;
}

Jetzt funktioniert es.

Jetzt kommt mein Problem ich will es nur in einem, nicht in allen MODAL ändern,

div#exampleModal .modal-backdrop.show {
    opacity: 0;
}

aber so auch nicht;

.aendern {
    opacity: 0;
}

Aber das hat keinerlei Auswirkung….

Auch verstehe ich nicht was genau der Unterschied zwischen

.test .teil{color:#ff0000; }

Und

.test.teil{color:#ff0000; }

Ist.