Question

我正在使用自定义css，对于html页面完全按照this示例进行如下操作，让我们说index.html：

html {
  overflow-y: scroll;
}

body {
    font-family: Helvetica, Arial, Verdana;
    background: #efefef url('../img/ticks.png') repeat 0 0;
    margin:15px 0 0 0;
    font-size:12px;
}


.container { 
    position: relative; 
    width: 960px; 
    margin: 0 auto; 
    -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;  
}

#filters {
    margin:1%;
    padding:0;
    list-style:none;
}

    #filters li {
        float:left;
    }

    #filters li span {
        display: block;
        padding:5px 20px;       
        text-decoration:none;
        color:#666;
        cursor: pointer;
    }

    #filters li span.active {
        background: #e95a44;
        color:#fff;
    }



#portfoliolist .portfolio {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    width:23%;
    margin:1%;
    display:none;
    float:left;
    overflow:hidden;
}

    .portfolio-wrapper {
        overflow:hidden;
        position: relative !important;
        background: #666;
        cursor:pointer;
    }

    .portfolio img {
        max-width:100%;
        position: relative;
        top:0;
    -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);     
    }

    .portfolio .label {
        position: absolute;
        width: 100%;
        height:40px;
        bottom:-40px;
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    }

        .portfolio .label-bg {
            background: #e95a44;
            width: 100%;
            height:100%;
            position: absolute;
            top:0;
            left:0;
        }

        .portfolio .label-text {
            color:#fff;
            position: relative;
            z-index:500;
            padding:5px 8px;
        }

            .portfolio .text-category {
                display:block;
                font-size:9px;
            }

    .portfolio:hover .label {
    bottom:0;
  }
    .portfolio:hover img {
    top:-30px;
  }  





/* #Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container {
        width: 768px; 
    }
}


/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
    .container { 
        width: 95%; 
    }

    #portfoliolist .portfolio {
        width:48%;
        margin:1%;
    }       

    #ads {
        display:none;
    }

}


/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        width: 70%;
    }

    #ads {
        display:none;
    }

}

/* #Clearing */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.row:after,
.clearfix:after {
  clear: both; }
.row,
.clearfix {
  zoom: 1; }

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

要将index.html的模板与网站的其余页面（完全依赖于bootstrap css并独立于此css）相匹配，尤其是页眉和页脚部分，我添加了以下行： index.html

的标题字段

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-jhdkjsahd#SomeRandomCheckSumProvidedByBootstrap#asjdhasdkjhsdkj" crossorigin="anonymous">

这改变了以下

的实际行为

这样的事情

悬停上的文字消失。

上述元素的html代码如下：

<div class="portfolio logo" data-cat="logo">
                <div class="portfolio-wrapper">             
                    <img src="img/portfolios/logo/5.jpg" alt="" />
                    <div class="label">
                        <div class="label-text">
                            <a class="text-title">Bird Document</a>
                            <span class="text-category">Logo</span>
                        </div>
                        <div class="label-bg"></div>
                    </div>
                </div>
            </div>

我将boostrap css仅用于index.html页面的页眉和页脚，因此，我尝试使用here所述的<style scoped>标记，但我担心它不是处理这个的好方法。

如何解决此问题？

Answer 1

如果没有看到实际的代码，就无法为您的情况提供实际的标记。但是，问题的根源是特异性。您可以阅读更多相关信息here。

基本上，你在CSS中使用的选择器越多，它在特异性上的排名就越高。例如，引用上面的HTML，

.label-text .text-title {}

不是很具体。

.label .label-text .text-title {}

更具体，优先。

div.label > .label-text > .text-title {}

更具体。和

!important

甚至更多特定，并且优先于所有其他

。

因此问题的解决方案是你的CSS需要比Boostrap CSS更具体。检查浏览器中的问题元素，看看Bootstrap使用的选择器。然后在自定义CSS中使用更具体的。

不幸的是，Bootstrap在许多情况下使用$pr，所以你也将被迫使用它来过度使用它。

Answer 2

我遇到了与你想要做的事情相同的问题，最后通过将标签div的display属性设置为block来解决它。我还注意到chrome会自动修复与Safari相反的问题。

Answer 3

您可以做的是可以在CSS的代码的每个属性中添加强文本!important。

我发现这是最有用和最简单的解决方案。

Answer 4

您可以在课程中的每个样式后添加！important 。添加！important 基本上会使 CSS 更多优先级/权重 t，这样您就可以覆盖其他样式。

或者您可以使用

执行此操作

将 custom.css 文件链接到bootstrap.css下面的最后一个条目。 Custom.css样式将覆盖bootstrap.css

Ex Html： -

如何避免bootstrap css覆盖自定义css？

4 个答案: