Назначить непрозрачность 1.0 рекурсивно с помощью:
div > div { opacity: 1.0 }
Пример:
div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }
<div style="background-color: #f00; padding:20px;">
<div style="background-color: #0f0; padding:20px;">
<div style="background-color: #00f; padding:20px;">
<div style="background-color: #000; padding:20px; color:#fff">
Example Text - No opacity definition
</div>
</div>
</div>
</div>
<div style="opacity:0.5; background-color: #f00; padding:20px;">
<div style="opacity:0.5; background-color: #0f0; padding:20px;">
<div style="opacity:0.5; background-color: #00f; padding:20px;">
<div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity inherited
</div>
</div>
</div>
</div>
<div class="x" style="background-color: #f00; padding:20px;">
<div class="x" style="background-color: #0f0; padding:20px;">
<div class="x" style="background-color: #00f; padding:20px;">
<div class="x" style="background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity not inherited
</div>
</div>
</div>
</div>
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity
</div>
Вы не упомянули, для чего вы создаете приложение, но вы в основном говорите о «представлениях», которые отображают информацию, основанную на доступе пользователя и странице, которую они просматривают.
Я процитирую страницу из угловых документов: https://docs.angularjs.org/tutorial/step_09
Чтобы добавить подробный вид, мы собираемся превратить index.html в то, что мы называем «шаблоном макета». Это шаблон, который является общим для всех представлений в нашем> приложении. Другие «частичные шаблоны» затем включаются в этот макет> шаблона в зависимости от текущего «маршрута» - представления, которое в данный момент отображается> пользователю.
BLOCKQUOTE>