首页 > 解决方案 > 内部 CSS 有效,但外部无效

问题描述

内部 CSS 有效,但外部 CSS 无效。我已经用代码 !important 尝试了外部,但它没有任何意义。 我想在我的网站上添加一个画廊。但我有一个问题。正如我在浏览器中看到的那样,一些边距会覆盖分机。CSS。但事情是这样的,我在 HTML 代码中没有边距。我唯一能想象的是,Bootstrap 正在做一些具有高优先级的事情。

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    width: 180px;
    position: static;
}
      
div.gallery:hover {
    border: 1px solid #777;
}
      
div.gallery img {
    width: 100%;
    height: auto;
}
      
div.desc {
    padding: 15px;
    text-align: center;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>       
      
   <div class="gallery">
       <a target="_blank" href="gtrr35.jpg">
          <img src="gtrr35.jpg" alt="Nissan GT-R R35 Nismo">
       </a>
       <div class="desc">Nissan GT-R R35 Nismo</div>        
   </div>

标签: javascripthtmlcssbootstrap-4styles

解决方案


您的自定义 CSS 样式表在哪里链接?它应该是所有其他标签中的最后一个(从左上角到右下角),否则它会由于 CSS 的级联方面而被覆盖......


推荐阅读