Question

我遇到bootstrap css与自定义css重叠的问题。这是我的app html，它使用bootstrap 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类导致bootstrap 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实现到我的日期选择器按钮。感谢

Answer 1

您应该尝试更改自定义css类名称（.btn）

Answer 2

所以，它听起来像是你希望你的日期选择器看起来像某种方式但是来自bootstrap的.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类添加到按钮，那就是这样。当我无法编辑通过脚本或其他东西加载的类时，我不得不使用这种方法很多次。

CSS适用于特定的类

2 个答案: