在laravel中运行特定部分页面的特定css而不覆盖页面其他部分的css？

Question

Let's elaborate my problem. Think we have 3 template files 1.Master 2.Child(home) 3.navbar layout(included in home)

Mater->home->navbar

i have 2 external css files which have this css

p
{
color:red;
}

and

p
{
color:blue;
}

1st css file is linked in master.blade.php and 2nd css file is linked into navbar.blade.php

I want text color of navbar as blue and text color of home(other than navbar) as red.

Now the output is blue(overriding css which is declared in master).

I don't want to modify css(specificity), Is there anything in laravel like scopes for css.

Answer 1

Are you familiar with blade into laravel?

I think you should define a yield section in your master

@yield('css')

and then call it in your navbar or etc ... like this

 @section('css')
     p
     {
      color:red;
     }
    @endsection

and in other files

 @section('css')
 p
 {
  color:blue;
 }
@endsection