解决冲突的 CSS。如何添加选择器？答案

【问题标题】：Solving conflicting CSS. How to add selector?解决冲突的 CSS。如何添加选择器？
【发布时间】：2016-07-12 03:07:47
【问题描述】：

我正在现有的 web 应用程序中开发一个供个人使用的小模块。（仅供参考，WHMCS）。为了设置模块输出的样式，我使用a template。但是，现在看起来那些 CSS 样式表与原始样式表（来自 webapp）有冲突，并且模块 CSS 也应用于 webapp（这完全破坏了视图。

据我所知，我可以通过向我的所有模块输出页面添加一个额外的 div 来解决这个问题，就像这样

<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>

变成：

 <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>

那么我可以将 css 限制为“mymodulecss”。然后，在那之后，我必须更改所有（模块）css文件，所以它们只应用于“mymodulecss”

您能告诉我这种方法是否正确，最简单的方法是更改 css 以使其查看“mymodulecss”选择器吗？

谢谢！！

【问题讨论】：

也许在这种情况下
比
更好。
对于 css 使用 .mymodulecss 在您要修改的所有内容之前。例如.mymodulecss div .navbar {Css}
如果我理解正确：是的，您的方法是正确的。更改现有 CSS 的最简单方法是添加新类以覆盖它们（或者如果您知道自己在编辑源代码）。几周前我写了一个小指南，从一开始就防止类似的问题：Rules to Bootstrap

标签： html css

【解决方案1】：

您可以尝试将:nth-of-type(n) 部署到您想要优先的样式声明。

伪类:nth-of-type(n) 将增加样式声明的特异性（覆盖级联），而无需对标记进行任何更新或更改。

例如：

本地 CSS：

aside:nth-of-type(n) {
background-color: red;
}

外部 CSS：

aside {
background-color: blue;
}

每个<aside> 的background-color 将保持red，即使background-color 被重新声明为blue，稍后在级联中（在外部CSS 中）。

【讨论】：

好吧，问题是我无法控制原始 (WHMCS) css 的加载。源已加密。

【解决方案2】：

首先尝试在<link> 周围移动，以便最后加载您想要优先的那个。

例如

<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 -->

来源：What is the order of loading the CSS files in a HTML page?

您可能还想尝试将!important 添加到重要样式的末尾

例如

  div {
    padding: 15px !important;
  }

编辑：正如保罗所说，这不是最佳做法。

【讨论】：

使用 !important 时要小心，如果您的选择器不够具体，您总是有可能让它破坏您的网站。
只有在别无他法的情况下才使用!important。例如覆盖内联样式。
这确实是一个选项，但我无法更改这一点，因为我无法控制原始 CSS 的加载方式。我只能在 head 部分的原始 CSS 之后添加额外的行

【解决方案3】：

我通过添加解决了它

<div class="mymodulecss">

并使用更少：

add selector to each line in css file

【讨论】：