css覆盖删除未使用的样式bootstrap

时间:2015-11-12 09:53:48

标签: html css twitter-bootstrap

您好我想删除css中未使用的样式,或覆盖它们。标准样式如下所示:

.datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover {
background-color: #006dcc;
background-image: -moz-linear-gradient(to bottom,#08c,#04c);
background-image: -ms-linear-gradient(to bottom,#08c,#04c);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
background-image: -webkit-linear-gradient(to bottom,#08c,#04c);
background-image: -o-linear-gradient(to bottom,#08c,#04c);
background-image: linear-gradient(to bottom,#08c,#04c);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
border-color: #04c #04c #002a80;
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);

我想成功

.datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover {
background-color: #93A630;
}

我为此目的使用bootsrtrap-override.css

但只有background-color的值发生了变化。 如何删除其余未使用的?我不想在原始的css文件中删除它!

3 个答案:

答案 0 :(得分:2)

如果通过"如何删除剩余的未使用的?" 你的意思是如何重置 CSS以便没有渐变等那么你& #39;我必须在bootstrap-override.css中重置这些属性。

CSS中几乎没有resetdefault属性可以始终如一地使用,因此您需要覆盖以前设置的CSS。

这会使您的代码段看起来像:

.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
    background-color: #93A630;
    /*additional resets*/
    background-image: none;
    filter: none;
    border-color: transparent;
    text-shadow: none;
}

这将通过以正常方式覆盖样式而不删除原始文件中的内容来删除样式。

由于您已经为:hover状态和额外课程设置了样式,因此您可以继续使用 - 但请注意可能有:hover或{的其他选择器{1}}例如,您原来的重置选择器中没有!

编辑1(2015年11月12日)

:active进行了一些Google搜索后,我在mdn

上找到了网页
  1. unset - browser support
  2. initial - browser support
  3. inherit - browser support
  4. 正如您所看到的,除unset css property之外的浏览器支持不是很好,所以这将是您唯一的 IF ,您可以放弃对Internet Explorer的支持,我认为可以发生在未来2 - 3年内,由于微软的新浏览器Edge

    browserstats来自http://caniuse.com,这是检查浏览器兼容性的主要来源。

    希望链接有所帮助。

    所有日期都格式化为dd-mm-yyyy

答案 1 :(得分:0)

您需要设置var $element = $('.stock'); var stock = parseInt($element.text()); if(!isNaN(stock)){ $element.addClass('low-stock'); } 才能实际转换所需的颜色

示例:

background-image: none;
p {
      background-color: #006dcc;
    background-image: -moz-linear-gradient(to bottom,#08c,#04c);
    background-image: -ms-linear-gradient(to bottom,#08c,#04c);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
    background-image: -webkit-linear-gradient(to bottom,#08c,#04c);
    background-image: -o-linear-gradient(to bottom,#08c,#04c);
    background-image: linear-gradient(to bottom,#08c,#04c);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
    border-color: #04c #04c #002a80;
    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}

p{
    background-color: #93A630;
    background-image: none;
}

如果我没有正确回答你的问题,请在评论中告诉我

答案 2 :(得分:0)

在你的css中添加这个

background-image: none;
border: 0;
text-shadow: none;