Question

在我的laravel应用程序中，我使用了一个名为＆＃34; chatter＆＃34;的论坛包。

这个论坛被注入我的主布局，所以它看起来像这样：

它被注入一个名为<div id="chatter">的容器中，其样式位于样式表chatter.css中，该样式表与我的主表单独存在。

问题是，此表中的某些样式与我的导航和页脚冲突。此外，我的主要工作表中的一些样式正在影响论坛（虽然最低限度，所以我不介意手动进行更改。）

我无法更改标记，但我可以编辑样式。

那么我怎样才能使chatter.css中的所有样式仅适用于<div id="chatter">内部的内容？

Answer 1

将#chatter添加到chatter.css中的每个样式，如下所示

#chatter table{...}
#chatter tr{...}
#chatter td{...}
etc.

如果样式的级别高于chatter div，则按以下方式添加：

html #chatter{..}
body #chatter div{...}

Answer 2

你必须像Nawed Khan所指出的那样命名你的CSS，但有一个更简单的方法，而不是手动更改你的每个样式。此方法使用less来为您处理它。

将其放在名为chatter.less的文件中。

#chatter {
    @import (less) 'chatter.css';  
}

然后你需要把它包含在你的页面上......

<link rel="stylesheet/less" type="text/css" href="chatter.less" >

然后，您需要在包含.less文件后加入less.js。

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

在您的.less文件中，您可能不得不弄乱chatter.css的路径，我相信它会与您在.less文件中的任何文件相关。