为内部项设置CSS样式

Question

你能告诉我如何将css应用于下面提到的项目吗？感谢。

这是 Fiddle

注意：只需点击-z按钮。之后显示日期组件。我需要降低该组件的高度。

我试过如下图所示。但它不起作用:(

Edit

更新：

.editable-wrap editable-bsdate .editable-controls .input-group .form-control { height: 24px !important; } 组件是这样的：

html

Answer 1

您忘记了testCompile 'junit:junit:4.12' compile 'com.android.support:support-annotations:23.1.1' androidTestCompile ('com.android.support.test:runner:0.5'){ exclude module: 'support-annotations' } androidTestCompile ('com.android.support.test.espresso:espresso-core:2.2.2'){ exclude module: 'support-annotations' }

中的点

应该这是因为editable-bsdate和.editable-wrap位于同一元素上：

.editable-bsdate

Answer 2

通过添加这些类，它可以工作。

该组件具有填充，这会影响其大小和设置高度。

/* input */
.input-group input {
  padding: 2px;
  height: 26px;
}

/* input calender button */
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
  padding: 2px;
}

Updated fiddle

Answer 3

您可以尝试使用此{/ p>这样的>选择器

.editable-wrap.editable-bsdate > .editable-controls > .input-group > .form-control {
     height: 24px;
}

修改

我会在组件html中添加一个类，如下所示：

<td>
  <span class="foo" editable-bsdate="comment.date" e-datepicker-popup="MM-dd-yyyy" e-ng-click="vm.open($event,'$data')" e-is-open="vm.opened.$data" e-name="date" e-form="commentForm">
     {{ comment.date | date:'MM-dd-yyyy' }}
   </span>
</td>

然后使用简单的CSS规则，如：

span.foo{
  height:24px;
  //other rules here...
}