Question

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

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

如果将datepicker确实实现为一个表，那么在CSS中更具体是可行的方法，是的。正如您所注意到的，将.jobs-table tr替换为.jobs-table :not(.datepicker) tr并不起作用，因为:not(.datepicker)可以应用于外部表格中的任何元素（tbody，tr，td），然后是最里面的元素tr确实得到了风格。

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

.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类。这是一个给datapicker表的类，还是一个不同的表？

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

1 个答案: