声明CSS规则仅适用于特定类

Question

我只需要将以下CSS应用于特定的div (因为冲突)：

所讨论的div的类名是datepicker。我是否将以下table声明为.datepicker-days.table？但是，我如何声明下面的.table类呢？

CSS

    table {
      max-width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
    }
    .table {
      width: 100%;
      margin-bottom: 18px;
    }
    .table th, .table td {
      padding: 8px;
      line-height: 18px;
      text-align: left;
      border-top: 1px solid #ddd;
    }

<div class="datepicker-days" style="display: block; ">
      <table class=" table-condensed">
         <thead>
             <tr>
                <th class="prev">
                ....

对不起，如果这是不清楚的，CSS规则是从Bootstrap。我只是使用了一些规则，因为我正在使用的数据采集器插件取决于这些特定的规则。因此，在代码中有其他<tables>实例的地方，我不希望应用这些规则。

Answer 1

只需使用后代选择器：

.datepicker-days table {
    /* this rule will only apply to `<table>` elements that are descendents of any element with class "datepicker-days" */
}

Answer 2

.datepicker-days { /* Targets the div */ }

.datepicker-days table { /* targets all tables nested in the div */ }

.datepicker-days > table { /*targets only tables that are direct children on the div */ }

Answer 3

你可以做以下几件事：

.datepicker-days table {
    Styles here;
}

它只查找只包含<table>类的.datepicker-days