Question

假设，我有两个不同的样式表example1.css和example2.css。它们包含以下样式：

在example1.css

.colorme
{
   background-color:Red;
}

在example2.css

.colorme
{
   background-color:Green;
}

是否需要在我的html代码中同时使用这两种样式？例如，如果我有两个 div 标签，则可以在第一个 div 标签中使用example1.css，在第二个 div 中使用example2.css标签？

Answer 1

这不可能用

          <div style="background-color:red; height:100px;"> </div>
          <div style="background-color:Green; height:100px;"> </div>

Answer 2

如果您将css规则命名为不同的名称，以便可以使用它们来对两个div进行样式设置，则可以将两个不同的样式规则组合到一个样式表中，如下图所示，div class =“ cities1”是名称css1 {} css规则的定义，因此该css规则中的所有内容都将应用于具有class = css规则名称的div

<!DOCTYPE html>
<html>
<head>
<style>

.cities1 {
  background-color: green;
  color: white;
  margin: 20px;
  padding: 20px;
}
.cities2 {
  background-color: red;
  color: white;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="cities1">
<h2>London</h2>
<p>London is the capital of England.</p>
</div> 

<div class="cities2">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

</body>
</html>

Answer 3

我建议您按照以下方法在一个文件中执行此操作，而不是使用两个文件

jQuery("#changeCs").click(function(){
jQuery("#myBodyId").toggleClass('yellowTheme');
});

.redTheme .someBloc{
color: red;
}

.yellowTheme .someBloc{
color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myBodyId" class="redTheme">  <!-- Change body class as per your requirement, You can use body tag in your own code instead of DIV-->
<div class="someBloc"> Lorem Ipsum Dolor sit amet </div>

<button id="changeCs"> Change Color Scheme </button> 
</div>

Answer 4

如果同时导入两个CSS样式表，并且它们具有相同的CSS类，则最后导入的样式表将覆盖前一个样式表。如果要使用显式导入的第一个样式表，则可以使用！important。

！重要声明覆盖了CSS的级联特性，通常被认为是hack。您应该避免在大多数情况下使用它们。

示例：

.colorme {
    background-color: red !important;
}

如果您想同时使用这两个类，建议您给它们使用不同的类名。

同时将两个包含相同样式属性的css文件用于不同的div标签

4 个答案: