html - css override 删除未使用的样式 bootstrap

标签 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文件中删除它!

最佳答案

如果 “如何删除未使用的其余部分?” 你的意思是如何重置 CSS 以便没有渐变等,那么你将不得不重置那些bootstrap-override.css 中的属性.

几乎没有 resetdefault CSS 中的属性以一致地使用,因此您实际上需要覆盖之前设置的 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 设置了样式state 和 extra classes 你很高兴 - 但是,注意其他可能有 :hover 的选择器或 :active例如,它不在您原来的重置选择器中!

编辑 1 (12-11-2015)

在为 unset css property 做了一些谷歌搜索之后我在 mdn 上找到了页面

  1. unset - browser support
  2. initial - browser support
  3. inherit - browser support

如您所见,浏览器支持除 initial 之外的任何内容一点都不好,所以这将是你唯一的选择如果你可以放弃对 Internet Explorer 的支持,我认为由于微软的新浏览器 Edge,这可能会在未来 2 - 3 年内发生.

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

希望这些链接有所帮助。

所有日期的格式都是 dd-mm-yyyy

关于html - css override 删除未使用的样式 bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33668607/

相关文章:

css - 将鼠标悬停在大屏幕上时,Bootstrap 4 导航栏会打开下拉菜单,但会在小屏幕上打开

javascript - 使用 Affix 时 Bootstrap 导航栏重叠内容

iphone - Twitter Bootstrap 子导航关闭而不是激活 iPhone 上的链接

javascript - 通过 JavaScript 将对象附加到 DOM 的背景音乐

php - 使用 ACF Gallery 图像在图像链接上叠加文字

javascript - 我可以让内容出现在 Div 中吗?当光标悬停在单独的 Div 上时?

css - xml 计数列表中的元素在 firefox 中不起作用

html - 谷歌风格的 Bootstrap 主题会抛出大量 CSS 验证错误。使用样式表安全吗?

html - 去掉 Wrapper 中的空格

html - CSS 溢出-x : visible; and overflow-y: hidden; causing scrollbar issue