Question

我正在开发一个用于个人使用的小模块，在现有的webapp中。（fyi，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限制为＆＃34; mymodulecss＆＃34;。然后，在那之后，我必须改变所有（模块）css文件，因此它们仅适用于＆＃34; mymodulecss＆＃34;

你能否告诉我这种方法是否正确，以及最简单的方法是改变css，以便它可以看到＆＃34; mymodulecss＆＃34;选择？

谢谢！

Answer 1

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

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

例如：

本地CSS：

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

外部CSS：

aside {
background-color: blue;
}

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

Answer 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;
  }

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

Answer 3

I solved it by adding

<div class="mymodulecss">

and using Less:

add selector to each line in css file

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

3 个答案: