html - 如何避免 Bootstrap css 覆盖自定义 css？

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)，尤其是页眉和页 footer 分，我将以下行添加到 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 的页眉和页脚页面，因此，我尝试使用 <style scoped>标签描述 here ，但我担心这不是处理此问题的好方法。

如何解决这个问题？

Answer 1

如果没有看到实际的代码，就不可能为您的情况提供实际的标记。然而，问题的根源在于特异性。您可以阅读更多相关信息 here .

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

.text-title {}

不是很具体。

.label-text .text-title {}

更具体并且优先。

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

更具体。并且:

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

甚至更具体并且将优先于所有其他。

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

不幸的是，Bootstrap 在许多情况下使用 !important，因此您将不得不使用它来超越它们。