CSS（覆盖引导核心）

Question

我写了以下CSS ：

MyForm.css

.my-container [class^="col-md"] {
   .my-inner {
   padding : 10 px;
   background-color: #eee;
   .... etc...
}

如果我在代码中使用它：

<div class="container my-container">
  <div class="col-md-4" id="divTabPortfolios">
     <div class="my-inner">

     </div>
  </div>
  <div class="col-md-4" id="divTab">
     <div class="my-inner">

     </div>
  </div>
</div>

没用 如果删除子类.my-inner，它将正常工作。

Answer 1

真的可以那样使用子类吗？ 我会做类似的事情：

.my-container [class^="col-md"] .my-inner {
      padding : 10 px;
      background-color: #eee;
      .... etc...
}

...取决于您尝试达到的目标。

Answer 2

基于标记，您似乎正在尝试使用像LESS或SASS这样的预处理器。 CSS无法正确输出的原因是因为您没有关闭.my-inner 。

如果您使用的是预处理器，则应如下所示：

.my-container [class^="col-md"] {
   .my-inner {
     padding : 10 px;
     background-color: #eee;
     .... etc...
   } <-- forgot this closing tag
}

如果您使用纯CSS，请参阅Fredric的答案。

Answer 3

请更改您的html代码为

HTML

<div class="container my-container">
  <div class="col-md-4" id="divTabPortfolios">
     <div class="my-inner">

     </div>
  </div>
  <div class="col-md-4" id="divTab">
     <div class="my-inner">

     </div>
  </div>
</div>

您错过了双引号，也许这在您的html代码中引起了问题，并且还检查了CSS代码。

CSS

.my-container [class^="col-md"]

.my-inner
{
      padding : 10 px;
      background-color: #eee;
      .... etc...
}

Answer 4

1. 是否要从MyForm.css或H​​TML页面中删除子类.my-inner？
2. 正如Dead所说，您的样式表必须位于引导程序之后，所以我问，这是正确的顺序吗？
3. 如果您在浏览器中检查页面，可以在其中看到您的自定义属性吗？
4. 尝试直接为您编写.my-inner类（删除.my-container [class^="col-md"] ）。

如果这些都不起作用，请尝试发布更多有关的详细信息。