CSS 适用于特定类答案

【问题标题】：CSS apply to specific classCSS 适用于特定类
【发布时间】：2015-11-06 11:42:08
【问题描述】：

bootstrap css 与自定义 css 重叠存在问题。这是我呈现日期选择器的应用程序 html，它使用引导 css。

 <input type="text" class="datepicker-input" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" ng-click="open($event)" placeholder="Choose your date"/>

这是我定制的.btn 类，它会导致引导 btn 类出现问题。我无法像使用此 btn 样式的许多其他页面一样直接删除此类或修改名称。

.btn {
    background-color: #b0b1a8;
    border-radius: 4px;
    border-width: 0;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    font-size: 21px;
    font-size: 2.1rem;
    padding: 8px 20px;
    padding: 0.8rem 2rem;
    margin: 0;
    outline: none;
    text-align: center;
    -webkit-transition: background-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
    -moz-transition: background-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: background-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
}

现在，我怎样才能欺骗上面的 css，以便不将 .btn 实现到我的日期选择器按钮。谢谢

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您应该尝试更改您的自定义 css 类名称 (.btn)

【讨论】：

【解决方案2】：

所以，听起来你希望你的日期选择器看起来像某种方式，但引导程序中的 .btn css 正在做它想做的事情？如果您能够向该按钮添加一个类，那么您可能只需要使用!important 覆盖它。

例如：

.bootstrap-btn{background: pink; font-size: 20px; border: 3px solid white;}

.my-new-btn{background: white !important; font-size: 24px !important; border: 2px solid green !important;}

同样，如果您可以将my-new-btn 类添加到您的按钮，则可以这样做。当我无法编辑通过脚本或其他方式加载的类时，我不得不多次使用此方法。

【讨论】：