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

时间:2012-07-31 22:14:53

标签: html css

我有以下CSS我只需要应用于特定div(因为冲突):

有问题的div的类名为datepicker-days。我是否将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;
    }

HTML

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

很抱歉,如果不清楚,CSS规则来自Bootstrap。我只是使用了一些规则,因为我使用的datepicker插件取决于那些特定的规则。所以我的代码中有<tables>的其他实例,我不希望这些规则适用。

4 个答案:

答案 0 :(得分:5)

只需使用后代选择器:

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

答案 1 :(得分:3)

.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 */ }

答案 2 :(得分:2)

您将执行以下操作:

.datepicker-days table {
    Styles here;
}

这会查找仅<table>

.datepicker-days

答案 3 :(得分:0)

如果您只需要将特定样式应用于一个唯一的div,为什么不给它一个id#