Question

可能不是我问题的最佳措辞，这是我想要完成的事情。

我使用带有Angular2样式的bootstrap 3应用，我们使用了很多组件（angular1.x中的指令）。这也导致我们在组件内部有组件。

在我的一个页面上，我有引导类.well，然后在那个内部使用.well的另一个组件。因此，如果您熟悉bootstrap，则另一个.well内的.well会产生相当多的填充。

所以，我想编写一个css选择器，当我在另一个.well内部删除内部.well的填充时。

这是我迄今为止所做的尝试：

.well .well {
  padding: 0;
}

div#doubled-up-well .well {
  padding: 0;
}

div.well .well {
  padding: 0;
}

div.well form.well {
  padding: 0;
}

这些似乎都不起作用，我在这里做错了什么？

以下是如何构建一个更好的主意：

<div class="well" id="doubled-up-well">
  <my-custom-component>
    <form class="well {some more angular classes here}"></form>
  </my-custom-component>
</div>

是否与我的form元素上定义的更多类有关？是因为我的div和我的form之间存在一个元素（这就是为什么我在我的CSS选择器中使用＆gt;＆gt;）？

编辑：我也试过这些：

div#doubled-up-well > member-add-member-demo > form.well.ng-untouched.ng-pristine.ng-valid {
    padding: 0;
    margin-bottom: 0;
    background-color: red !important;
}

div#doubled-up-well form.well.ng-untouched.ng-pristine.ng-valid {
    padding: 0;
    margin-bottom: 0;
    background-color: red !important;
}

编辑：这里是在页面上呈现的确切html的小提琴。仅供参考 - 小提琴作品，它只能在我的实际应用中使用。

https://jsfiddle.net/rv69f6ok/2/

Answer 1

我也遇到过这个问题，在我的情况下，这是因为我必须在需要修改它们的特定组件中编写样式。如果我尝试在全局css或父组件的css中编写.well .well，它将无法工作，因为每个组件的样式都与该特定组件隔离。

所以在你的情况下，我会在。孩子的组件中写一个样式，你想要摆脱填充。如果您在其他不希望应用减少填充的区域中使用该组件，我可能会将一些类添加到包含子.well类的同一元素中。额外的类可以作为一个标志，它将有自己的减少的填充值，并将通过添加特殊性来覆盖.well类，你的css如.foo.well {padding：0; }

css如何为具有相同类名的另一个元素的子类指定样式

1 个答案: