Html 解决冲突CSS。如何添加选择器？
我正在现有的网络应用程序中开发一个供个人使用的小模块。（供参考，WHMCS）。要设置模块输出的样式，我使用。 但是，现在看起来这些CSS样式表与原始样式表（来自webapp）相冲突，模块CSS也应用于webapp（完全扭曲视图） 据我所知，我可以通过向所有模块输出页面添加一个额外的div来解决这个问题，如下所示Html 解决冲突CSS。如何添加选择器？,html,css,Html,Css,我正在现有的网络应用程序中开发一个供个人使用的小模块。（供参考，WHMCS）。要设置模块输出的样式，我使用。 但是，现在看起来这些CSS样式表与原始样式表（来自webapp）相冲突，模块CSS也应用于webapp（完全扭曲视图） 据我所知，我可以通过向所有模块输出页面添加一个额外的div来解决这个问题，如下所示 <body> <!-- Main navbar --> <div class="navbar navbar-inverse bg-indig
<body>
<!-- Main navbar -->
<div class="navbar navbar-inverse bg-indigo">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><img src="../modules/addons/webcanyonerp/assets/images/logo_light.png" alt=""></a>
<ul class="nav navbar-nav pull-right visible-xs-block">
<li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li>
</ul>
</div>
<div class="navbar-collapse collapse" id="navbar-mobile">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-git-compare"></i>
<span class="visible-xs-inline-block position-right">Git updates</span>
<span class="badge bg-warning-400">9</span>
</a>
<div class="dropdown-menu dropdown-content">
<div class="dropdown-content-heading">
Git updates
<ul class="icons-list">
<li><a href="#"><i class="icon-sync"></i></a></li>
</ul>
</div>
......
</body>
-
Git更新
......
<body>
<div class="mymodulecss">
<!-- Main navbar -->
<div class="navbar navbar-inverse bg-indigo">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><img src="../modules/addons/webcanyonerp/assets/images/logo_light.png" alt=""></a>
<ul class="nav navbar-nav pull-right visible-xs-block">
<li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li>
</ul>
</div>
<div class="navbar-collapse collapse" id="navbar-mobile">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-git-compare"></i>
<span class="visible-xs-inline-block position-right">Git updates</span>
<span class="badge bg-warning-400">9</span>
</a>
<div class="dropdown-menu dropdown-content">
<div class="dropdown-content-heading">
Git updates
<ul class="icons-list">
<li><a href="#"><i class="icon-sync"></i></a></li>
</ul>
</div>
......
</div>
</body>
-
Git更新
......
谢谢！！首先尝试在
<link rel="stylesheet" href="limitless-reseponsive.css">
<link rel="stylesheet" href="foo.css">
<link rel="stylesheet" href="mymodulecss.css"> <!-- The styles in here will take precedence over the other two -->
Edit：正如Paul所说，这不是最佳做法。您可以尝试部署类型（n）的第n个
，以设置您希望优先的声明样式
类型（n）：n将增加样式声明的特殊性（覆盖级联），而无需对标记进行任何更新或更改
例如：
本地CSS:
aside:nth-of-type(n) {
background-color: red;
}
aside {
background-color: blue;
}
外部CSS:
aside:nth-of-type(n) {
background-color: red;
}
aside {
background-color: blue;
}
每个
的背景色将保持红色
，即使背景色
稍后在级联中重新声明为蓝色
。我通过添加
<div class="mymodulecss">
并且使用更少：
可能比这种情况要好。对于css，在所有要修改的内容之前使用.mymodulecss
。例如.mymodulecss div.navbar{css}
，如果我理解正确：是的，您的方法是正确的。更改现有css的最简单方法是添加新类以覆盖它们（或者如果您知道自己正在编辑源代码）.几周前我写了一个小指南，从一开始就防止类似的问题：小心使用！尽管很重要，如果你的选择器不够具体，你总是有可能让它破坏你的网站。只有在没有其他方法的情况下才使用！important
。例如，重写内联样式。这确实是一个选项，但我不能更改这是因为我无法控制如何加载原始CSS。我只能在head Section中的原始CSS之后添加额外的行。问题是我无法控制原始CSS（WHMCS）的加载。源代码是加密的。