Question

我想使用一堂课。问题是我有两个CSS文件，它们在first.css中包含一个相同的命名类，而在second.css中包含另一个相同的类，链接CSS文件的顺序如下：

<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="adminlte.css" />

adminlte.css用于我的界面，但是我喜欢引导表单的外观。每当我调用类表单控件时，它都由adminlte.css设置样式。

如何调用类form-control，但使用Bootstrap中的类？

注意：我无法切换链接CSS文件的顺序。

Answer 1

除加载顺序或特定性外，您无法指定要使用哪个版本的类规则。由于Bootstrap使用独立的（非嵌套或堆叠式）选择器，因此您无法通过复合类选择器来提高特异性。这将使本地替代成为您唯一的手段。

从库文件中获取CSS块，然后使用style标签将其放入文档中：

<style>
    .form-control {
        ...
    }

</style>

嵌入的样式将覆盖链接的样式表，因此，即使选择器相同，该选择器仍然优先。

Answer 2

@media查询是否不需要两个样式表？

@media only screen and (max-width: 768px){
    #my_div{
        /* style */
    }
}
@media only screen and (min-width:769px){
    #my_div{
        /* style */
    }
}

Answer 3

当您在有关！important的主要问题下面写了一个问题时，如果您在第二个CSS中看到此东西，这将覆盖您的第一个问题。

因为！important总是会覆盖普通的CSS。

因为您没有提到确切的事情，我建议您在第二个链接之后进行第一个链接，并且要应用哪个元素css赋予该属性！important，例如下面的示例。下面给出的只是示例，并非您的确切需要，只是为了向您解释其工作原理。

<div id="paragraph">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse neque nisl, gravida vitae tellus a, commodo mattis risus. Pellentesque nec libero maximus, imperdiet justo tincidunt, placerat risus. Cras vitae neque tincidunt, sagittis turpis et,
    tincidunt tortor. Sed sem lectus, suscipit at sollicitudin eget, euismod faucibus ex. Nam dignissim, est sit amet porttitor consectetur, tortor orci placerat augue, varius volutpat sem ante eget velit. Sed eget quam at nulla convallis pulvinar id
    non eros. Pellentesque venenatis lacus at dolor varius, molestie imperdiet ex pretium. Vestibulum scelerisque quis mauris quis posuere. Duis vitae enim non mauris malesuada dictum. Morbi suscipit aliquet leo a maximus. Nunc faucibus ut urna nec rhoncus.
    Proin semper ultricies rhoncus. Nulla efficitur rhoncus sollicitudin. Phasellus ac leo mi. Phasellus odio nulla, posuere ut ullamcorper quis, suscipit a erat. Phasellus sollicitudin iaculis ipsum, pretium mollis massa laoreet ut. </p>
  <h4 onclick="infobtn()"> More info</h4>
  <div class="info">
    <h1> More info...</h1>
  </div>
</div>

<div id="paragraph2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse neque nisl, gravida vitae tellus a, commodo mattis risus. Pellentesque nec libero maximus, imperdiet justo tincidunt, placerat risus. Cras vitae neque tincidunt, sagittis turpis et,
    tincidunt tortor. Sed sem lectus, suscipit at sollicitudin eget, euismod faucibus ex. Nam dignissim, est sit amet porttitor consectetur, tortor orci placerat augue, varius volutpat sem ante eget velit. Sed eget quam at nulla convallis pulvinar id
    non eros. Pellentesque venenatis lacus at dolor varius, molestie imperdiet ex pretium. Vestibulum scelerisque quis mauris quis posuere. Duis vitae enim non mauris malesuada dictum. Morbi suscipit aliquet leo a maximus. Nunc faucibus ut urna nec rhoncus.
    Proin semper ultricies rhoncus. Nulla efficitur rhoncus sollicitudin. Phasellus ac leo mi. Phasellus odio nulla, posuere ut ullamcorper quis, suscipit a erat. Phasellus sollicitudin iaculis ipsum, pretium mollis massa laoreet ut. </p>
  <h4 onclick="infobtn()"> More info</h4>
  <div id="class">
    <h1> More info...</h1>
  </div>
</div>

使用来自不同CSS文件的相同命名类

3 个答案: