如何规范化嵌套在 table 中的 bs-datepicker 的样式

Question

我有一个来自 angular 表带的 bs-datepicker 作为 table 中的 td 元素，但日期选择器继承了 table 的样式（我想保留原样）。它摆脱了日期选择器的外观。

This is a photo of the broken datepicker

我尝试在 css 中为所有元素添加 :not(.datepicker)，但这没有用。

简化HTML：

<table class="jobs-table" >

            <th>datepicker</th>

            <tr>

              <td>
                <i class="ion-calendar date-icon"></i>
                <input type="text"
                       name="servicedate"
                       class="form-control date-picker-class"
                       ng-model=""
                       bs-datepicker
                        />
                 </td >


            </tr >
</table>

CSS:

table {
width: 100%;
}

.jobs-tables tr:first-child {
border-bottom: 5px solid black;
border-top: none;
background-color: #fff;
color: #555;
line-height: 250%;
text-align: left;
}


.jobs-table tr {
border-top: 2px solid black;
line-height: 250%;
}


.tables-table td {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 207px;
padding-left: 10px;
}

.tables-table th {
white-space: nowrap;
overflow: hidden;
padding-left: 10px;
}

Answer 1

如果日期选择器确实实现为 table，那么在 CSS 中更具体是可行的方法，是的。
正如您所注意到的，用 .jobs-table :not(.datepicker) tr 替换 .jobs-table tr 没有用，因为 :not(.datepicker) 可以应用于外部 table (tbody, tr, td) 内的任何元素，然后毕竟最里面的 tr 确实得到了样式。

一种解决方案是使用 > 组合器，将样式限制在外部 table 而不是嵌套在内部的任何 table。

.jobs-table {
  width: 100%;
}

.jobs-tables > tbody > tr:first-child {
  border-bottom: 5px solid black;
  border-top: none;
  background-color: #fff;
  color: #555;
  line-height: 250%;
  text-align: left;
}

.jobs-table > tbody > tr {
  border-top: 2px solid black;
  line-height: 250%;
}

但不确定如何处理 tables-table class。是 class 给了数据选择器 table，还是完全不同的 table？

如何规范化嵌套在 table 中的 bs-datepicker 的样式

How to normalize style of bs-datepicker nested in table

html

css

angularjs

angular-strap