Php 将导航条刀片包含在其他刀片制作中”；CSS"；“冲突”；“拉雷维尔”；！_Php_Html_Css_Laravel

Php 将导航条刀片包含在其他刀片制作中”；CSS"；“冲突”；“拉雷维尔”；！

php html css laravel

Php 将导航条刀片包含在其他刀片制作中”；CSS"；“冲突”；“拉雷维尔”；！,php,html,css,laravel,Php,Html,Css,Laravel,我有一个导航刀片模板，应该包括这个刀片的所有刀片文件当我包含这些内容时，我的导航刀片的元素从其他刀片文件中获取CSS样式，而其他刀片则获取导航刀片的CSS样式。如果我没有弄错的话，就会发生CSS冲突是否可以强制元素从源接收/不接收CSS样式！？这是我的主刀： <html lang="{{php app()->getLocale() }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-U

我有一个导航刀片模板，应该包括这个刀片的所有刀片文件

当我包含这些内容时，我的导航刀片的元素从其他刀片文件中获取CSS样式，而其他刀片则获取导航刀片的CSS样式。如果我没有弄错的话，就会发生CSS冲突

是否可以强制元素从源接收/不接收CSS样式！？这是我的主刀：

<html lang="{{php app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

{{-- Part: all meta-related contents --}}
@yield('head-meta')

{{-- Part: site title with default value in parent --}}
@section('head-title')
    <title>Site title</title>
@stop
{{-- Part: load fonts --}}
@yield('head-fonts')
{{-- Part: load styles for the page --}}
@yield('head-styles')
{{-- Part: load scripts needed --}}
@yield('head-scripts')
{{-- Part: anything else in head --}}
@yield('head-extra')
</head>

<body>

{{-- Part: something at start of body --}}
@yield('body-start')

{{-- Part: header of body --}}
@section('body-header')
    {{-- Part: navigation bar --}}
    @include('navbar')
@show

{{-- Part: create main content of the page --}}
@yield('body-content')

{{-- Part: footer --}}
@section('body-footer')
    {{-- Part: footer is probably shared across many pages --}}
    {{--@include('partials.footer')--}}
@show

{{-- Part: load scripts --}}
@yield('body-scripts')
{{-- Part: something else to do --}}
@yield('body-others')
{{-- Part: finalize stuffs if there is --}}
@yield('body-end')

</body>
</html>


{--Part:所有元相关内容--}
@收益率（'head-meta'）
{{--Part:在父--}中具有默认值的站点标题
@章节（“标题”）
网站名称
@停止
{{--部分：加载字体--}
@收益率（'head-font'）
{{--Part:加载页面的样式--}
@收益率（‘头型’）
{{--Part:需要加载脚本--}
@收益率（'head-scripts'）
{{--Part:头上还有什么--}
@收益率（‘额外收益’）
{{--Part:body--}开头的某物
@收益率（‘body-start’）
{{--Part:body--}的头
@节（“正文-标题”）
{{--部分：导航栏--}
@包括（'navbar'）
@展示
{{--Part:创建页面的主要内容--}
@收益率（'body-content'）
{{--部分：页脚--}
@节（“正文-页脚”）
{{--Part:footer可能在多个页面上共享--}
{{--@include（'partials.footer'）--}
@展示
{{--部分：加载脚本--}
@收益（'body-scripts'）
{{--Part:还有别的事要做--}
@收益（“身体-其他人”）
{{--Part:如果有--}，则完成工作
@产量（‘体端’）

这是我的家乡刀片：

@extends('master')
@section('head-title')
    <title>{{__('messages.title')}}</title>
@stop

@section('head-styles')
    <!-- Bootstrap -->
    <link rel="stylesheet" href="/css/en/bootstrap.min.css">

    <!-- Definity CSS -->
    <link rel="stylesheet" href="/css/en/main.css">
    <link rel="stylesheet" href="/css/en/responsive.css">
@stop


@section('body-content')
    <!-- ========== Preloader ========== -->
    <div class="preloader">
        <img src="/images/loader.svg" alt="Loading...">
    </div>
@stop

@section('body-scripts')
    <!-- ========== Scripts ========== -->
    <script src="js/jquery-2.1.4.min.js"></script>

    <!-- Definity JS -->
    <script src="js/hero/main.js"></script>
@endsection

@extends（'master'））
@章节（“标题”）
{{{（'messages.title'）}
@停止
@节（“头样式”）
@停止
@节（“正文内容”）
@停止
@节（“正文脚本”）
@端部

最后，这是我的导航栏（导航栏）刀片：


{{{（'messages.title'）}
*
*
*

我也这样做，但我强烈建议您在CSS中创建一些分隔，这样就不会与任何其他页面规则冲突

您可以按类或id隔离导航栏样式。由于您只有一个导航栏，id可能是一个不错的选择：

#navbar a...
#navbar p...
#navbar .theclass...
#navbar > .childelement...
etc

这样，只有id为navbar的元素的子元素才能获得这些样式。此外，由于您已经指定了导航栏父项的id，因此与针对所有锚或所有段落的规则相比，它更为具体。如果仍然存在冲突规则，则可以在特定于导航栏的CSS中将其标记为未设置，或将其更改为您喜欢的任何内容。

您可以通过以下方式强制使用CSS！重要的是你的页面有主布局吗？也发布主视图和子视图，以便我们提供帮助you@romaltandel意味着我得到了所有元素的内联css？元素从另一个源提供CSS，如果我想为每个元素设置内联CSS，代码会很复杂。@MahdiYounesi是的，我有，但是当包含导航栏时，导航栏的CSS文件也包含在其他刀片中，CSS样式也会被破坏。非常感谢，你的回答帮了我很多忙，但是对于基本的标签，比如或仍然会发生冲突。通过更改类名，消除了导航刀片的冲突，但对于主刀片，冲突仍然存在。我认为，因为导航刀片是首先添加的，所以它们（导航CSS文件）比主刀片CSS文件具有更高的优先级，这会导致冲突。但不幸的是，我对此一无所知。你有办法解决这个问题吗！？谢谢。一个html页面应该只有一个body标签（还有一个html标签）。听起来您可能包括了一个完整的html页面，其中有自己的body标签作为导航刀片。在这种情况下，您可以将html和body标记放在主刀片文件中，并在主刀片文件中打开body标记之后包含导航刀片。然后，从导航刀片中删除所有html或正文标记。如果你需要把这些导航元素放在某个东西里面，就用一个div来代替body标签。我的问题解决了。我不知道该怎么感谢你。谢谢你的帮助。

#navbar a...
#navbar p...
#navbar .theclass...
#navbar > .childelement...
etc