Html 如何规范嵌套在表中的bs日期选择器的样式

我有一个来自angular strap的bs datepicker作为表中的td元素，但是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>

---

如果datepicker确实是作为一个表实现的，那么在CSS中更加具体是一个不错的选择。
正如您所注意到的，将

.jobs table tr

替换为

.jobs table:not（.datepicker）tr

不起作用，因为

:not（.datepicker）

可以应用于外部表（tbody，tr，td）中的任何元素，然后最内部的tr最终获得样式

一种解决方案是使用

组合器，将样式限制在外部表中，而不是嵌套在内部的任何表中

.jobs表{
宽度：100%；
}
.jobs tables>tbody>tr:第一个孩子{
边框底部：5px纯黑；
边界顶部：无；
背景色：#fff；
颜色：#555；
线高：250%；
文本对齐：左对齐；
}
.jobs表>tbody>tr{
边框顶部：2件纯黑；
线高：250%；
}

---

但不确定如何处理

表
类。这是给datapicker表的一个类，还是一个完全不同的表？
请提供工作代码。
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;
}